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.
Related
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.
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?
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);
}
}
Unfortunately, I think I misunderstand how to use trigonometric functions in Sass. I've done a fair amount of google search, but with limited results.
In order to animate the transition of an HTML element I have code similar to the following in one of my scss files:
#home-positions {
transform: translateX(200px * sin(45deg));
}
When my Sass is compiling, however, I get the following error:
Syntax error: Undefined operation: "200px times sin(45deg)".
It is very liking I am missing something fundamental, probably pretty simple, and syntactic. Unfortunately, I've looked at a bunch of examples of trigonometric function uses in Sass, though, and I haven't been able to spot the difference between my code, and that in the examples.
The following solution is extracted from Trigonometry In Sass by Daniel Perez Alvarez.
/* power */
#function pow($number, $exp) {
$value: 1;
#if $exp > 0 {
#for $i from 1 through $exp {
$value: $value * $number;
}
}
#else if $exp < 0 {
#for $i from 1 through -$exp {
$value: $value / $number;
}
}
#return $value;
}
/* factorial */
#function fact($number) {
$value: 1;
#if $number > 0 {
#for $i from 1 through $number {
$value: $value * $i;
}
}
#return $value;
}
/* pi */
#function pi() {
#return 3.1415926535897932384626433832795028841971694;
}
/* radian */
#function rad($angle) {
$unit: unit($angle);
$unitless: $angle / ($angle * 0 + 1);
// If the angle has 'deg' as unit, convert to radians.
#if $unit == deg {
$unitless: $unitless / 180 * pi();
}
#return $unitless;
}
/* sine */
#function sin($angle) {
$sin: 0;
$angle: rad($angle);
// Iterate a bunch of times.
#for $i from 0 through 10 {
$sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
}
#return $sin;
}
And then eventually
#home-positions {
transform: translateX(200px * sin(45deg));
}
To anyone confused by this in the future, Sass itself, as of 11/17/14 does not support trigonometric functions. Instead, the Compass framework is required to use them. (See this article for step-by-step instructions on installing compass.)
Or just
$sin45deg: .7071;
Then replace sin(45deg) with $sin45deg. Tada, no framework needed.
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.