Less - Strange Prepros compilation - less

Question

I have this less code :
colors : 1 #F00, 2 #0F0, 3 #00F, 4 #F0F;
.for(#colors); .-each(#values) {
#position: extract(#values, 1);
#color: extract(#values, 2);
&.raster-#{position} {
background-image: linear-gradient(#000000, #color);
}
}
I am using the for mixin from https://github.com/seven-phases-max/less.curious/blob/master/src/for.less
The generated code is :
.bg-1 {
background-color: #ff0000 !important;
color: extract(1 #ff0000, 3);
}
.bg-2 {
background-color: #00ff00 !important;
color: extract(2 #00ff00, 3);
}
.bg-3 {
background-color: #0000ff !important;
color: extract(3 #0000ff, 3);
}
.bg-4 {
background-color: #ff00ff !important;
color: extract(4 #ff00ff, 3);
}
I found the problem. I use .for() to generate .bg-xx classes.
#bgColors : red red yellow, blue blue white;
.for(#bgColors); .-each(#values) {
#name: extract(#values, 1);
#bgColor: extract(#values, 2);
#color: extract(#values, 3);
&.bg-#{name} {
background-color: #bgColor !important;
color: #color;
}
}
Whats wrong with this code ?

Answer 1

Instead of using the "tricks" with the if-wrapper (mixin) or mixins you could also consider to use mixins guards to create your loops as described at: http://lesscss.org/features/#loops-feature
For instance:
#bgColors: red red yellow, blue blue white;
.backgrounds(#colors; #iterator: 1) {
#name: extract(extract(#colors, #iterator), 1);
#bgColor: extract(extract(#colors, #iterator), 2);
#color: extract(extract(#colors, #iterator), 3);
&.bg-#{name} {
background-color: #bgColor !important;
color: #color;
}
& when (#iterator < length(#colors)) {
.backgrounds(#colors; #iterator + 1);
}
}
.backgrounds(#bgColors);
compiles into the following CSS code:
.bg-red {
background-color: red !important;
color: yellow;
}
.bg-blue {
background-color: blue !important;
color: white;
}