I have the the following mixin:
.image-ui-wave-pos (#num, #selected:0) when (#selected = 0) {
background-position: -(#image-ui-wave-width * #num) -28px;
}
I'd like to pass it to the following mixin as parameter:
.small-button (#pos-macro, #buttons, #i) when (#i > 0) {
#button: extract(#buttons, #i);
&.#{button} {
.pos-macro (#i);
}
.small-button(#pos-macro, #buttons, #i - 1);
}
as the parameter #pos-macro calling it like this:
.small-button (.image-ui-wave-pos, #wave-buttons);
But it doesn't compile. How to do so?
Related
I have this mixin:
// define variable for later use
.define(#prefix, #var) {
#defined: '#{prefix}_#{var}';
}
.for(#i, #n) {
.-each(#i)
}
.for(#n) when (isnumber(#n)) {
.for(1, #n)
}
.for(#i, #n) when not (#i = #n) {
.for((#i + (#n - #i) / abs(#n - #i)), #n);
}
// ............................................................
// .for-each
.for(#array) when (default()) {
.for-impl_(length(#array))
}
.for-impl_(#i) when (#i > 1) {
.for-impl_((#i - 1))
}
.for-impl_(#i) {
.-each(extract(#array, #i))
}
// getProperty mixin
.getProperty(#property, #var, #base: true) {
& when not (##var = false) and (#base = true) {
#{property}: ##var;
}
#custom: 'my_#{var}';
& when not (##custom = false) {
.for(##custom);
.-each(#name) {
.define(#name, #var);
& when not (##defined = false) {
.#{name} & {
#{property}: ##defined;
}
}
}
}
}
My variables are like:
#parallax-color:#ffffff;
#my_parallax-color: ~"page-1" ~"page-2";
#page-1_parallax-color:initial;
#page-2_parallax-color:initial;
I call it like:
.getProperty(color, parallax-color);
How to change my mixin when value = initial then generate default color:#ffffff; ?
How to not render when value = inherit for example?
Here's a problem:
I have some mixin in sass/scss:
#function strip-unit($value) {
#return $value / ($value * 0 + 1);
}
#mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
$u1: unit($min-vw);
$u2: unit($max-vw);
$u3: unit($min-font-size);
$u4: unit($max-font-size);
#if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
& {
font-size: $min-font-size;
#media screen and (min-width: $min-vw) {
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
}
#media screen and (min-width: $max-vw) {
font-size: $max-font-size;
}
}
}
}
I took it from there: Fluid Typography
Everything works perfectly fine, when I use the mixin in "normal way":
#include fluid-type(20rem, 90rem, 2rem, 10rem);
#include fluid-type(400px, 1600px, 24px, 96px);
But, what if I have some function converting px to rem units:
#function rem($px) {
#return ($px / 16) + rem;
}
And I want that function to help me with that:
#include fluid-type( rem(400), rem(1600), rem(24), rem(96) );
At this moment I catch an error :/
Can I do something about this? I don't wanna to covert px to rem manually every time I have to use the mixin.
I am trying to create a loop that outputs all of the possible combinations between coordinates -2,-2 to 2,2. Is there any way to do this without creating multiple loops?
Desired Output
#p1x0,#p2x0,#p-1x0,#p-2x0,#p1x1,#p-1x-1,#p-1x1,#p1x-1,#p2x2,#p-2x-2,p2x-2,p-2x2,#p2x1,#p2x-1,#p1x2,#p1x-2,#p-2x1,#p-2x-1,#p-1x2,#p-1x-2,#p0x-1,#p0x-2,#p0x0,#p0x1,#p0x2{}
Current Attempt
#cube-side {
border:red;
}
.create-cubes(#n, #i: -2, #z: -2, #side-sum:#i + #z) when (#side-sum =< #n) {
& when (#i < #z) {
.create-cubes(#n, #i+1);
}
& when (#z < #i) {
.create-cubes(#n, #z+1);
}
#p#{i}x#{z}:extend(#cube-side) {}
}
.create-cubes(4);
Output
#cube-side,
#p-2x-2 {
border: red;
}
There's way to do this w/o any loops at all:
#cube-side {
border: red;
}
-2, -1, 0, 1, 2 {
#p&x&:extend(#cube-side) {}
}
Though for an arbitrary list of values just a nested loop is the simplest solution of course (see for example), e.g. (in "pure Less") something like:
.create-cubes(-2, 2);
.create-cubes(#min, #max) {
.i; .i(#i: #min) when (#i <= #max) {
.j; .i(#i + 1);
}
.j(#j: #min) when (#j <= #max) {
#p#{i}x#{j}:extend(#cube-side) {}
.j(#j + 1);
}
}
I have a list of colors and I want to generate classes using these colors:
CSS
#color1: #b37974;
#color2: #ffa385;
#color3: #ff5500;
#color4: #b2682e;
This is the code i'm using:
Less
.loopingClass(#index) when (#index > 0) {
#ctype: "color#{index}";
.setClass(#color,#cindex) {
.btn-color-#{cindex} {
background-color:#{color} ;
}
}
.setClass(e(##ctype),#index);
.loopingClass(#index - 1);
};
.loopingClass(2);
When I try to compile the code with gulp, I receive "Unrecognised input" error. When I remove background-color: #{color} the error goes away. What is my mistake in this code?
Update:
The correct code is:
.loopingClass(#index) when (#index > 0) {
#ctype: "color#{index}";
.setClass(#color,#cindex) {
.btn-color-#{cindex} {
background-color:#color ;
}
}
.setClass(##ctype,#index);
.loopingClass(#index - 1);
};
.loopingClass(2);
As I already mentioned in comments above the error there is in e function (which does not make any sense there). The correct code would look like this:
#color1: #b37974;
#color2: #ffa385;
#color3: #ff5500;
#color4: #b2682e;
.loopingClass(#index) when (#index > 0) {
#ctype: "color#{index}";
.setClass(#color, #cindex) {
.btn-color-#{cindex} {
background-color: #color;
}
}
.setClass(##ctype, #index);
.loopingClass(#index - 1);
}
.loopingClass(2);
In fact all this can be simplified to just:
#color1: #b37974;
#color2: #ffa385;
#color3: #ff5500;
#color4: #b2682e;
.loopingClass(#index) when (#index > 0) {
.btn-color-#{index} {
#color: "color#{index}";
background-color: ##color;
}
.loopingClass(#index - 1);
}
.loopingClass(2);
More over the whole thing could be even more simple since you don't need to emulate arrays via "indexed variable names" because you can use array directly (unless you need to refer to those vars separately elsewhere):
#colors:
#b37974,
#ffa385,
#ff5500,
#b2682e;
.loopingClass(2);
.loopingClass(#index) when (#index > 0) {
.loopingClass(#index - 1);
.btn-color-#{index} {
background-color: extract(#colors, #index);
}
}
And finally (since I entered "optimizations never end" mode anyway), same thing with a bit of syntactic sugar:
#import "for";
#colors:
#b37974
#ffa385
#ff5500
#b2682e;
.btn-color- {
.for(#colors); .-each(#color) {
&#{i} {background-color: #color}
}
}
where imported for is thefor.
I am currently translating my grid into LESS, but I can't seem to figure out string interpolation.
Here's helper class that is supposed to generate all my columns:
.createColumns (#colNumber+1) {}
.createColumns (#index) when (#index < #colNumber) {
(~".col#{index}") {
width: #baseWidth * #index;
}
.createColumns (#index + 1);
}
.createColumns (01);
Problem is, I get error that says something is wrong with this part (~".col#{index}").
Here's the error message:
ParseError: Unrecognised input
in grid.css on line 17, column 4:
16 .createColumns (#index) when (#index < #colNumber) {
17 (~".col#{index}") {
18 width: #baseWidth * #index;
I have checked several examples and all use same syntax, so I'm not sure what I'm missing.
This was also one of my tries that resulted in an error:
.createColumns (#index) when (#index < #colNumber) {
#class : "col"#index;
.(#class) {
width: #baseWidth * #index;
}
.createColumns (#index + 1);
}
Escaped selector interpolation is deprecated in 1.4.x, use
.col#{index} {
width: #baseWidth * #index;
}
instead.