Less - Strange Prepros compilation

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 ?

Make sure you don't run multiple `.for` loops in the same scope. (In you snippet it looks like you have another `.for.-each` there that interfers with this one). If you have to, isolate those loops from each other with `& {}` ([see for example](https://github.com/seven-phases-max/less.curious/blob/master/articles/generic-for.md#multiple-loops-in-same-scope)), otherwise all `.-each` definitions of the same scope stack thus making each `.for` to run each `.-each`... — seven-phases-max, Mar 29 '15 at 16:38
I guess I could write an answer if you put a complete example in your Q (e.g. showing both (or all) loops inside that class (`.bg`?)) - so that I could write a modified example. Otherwise it just takes too long to cover all possible "multiple loops in the same scope" pitfall variations with a solution for every. — seven-phases-max, Mar 29 '15 at 17:04
You're right. In another less file I had this code for .bg-red, .bg-blue,.... Thanx — Lolo, Mar 29 '15 at 17:12
Yes, loops are especially to avoid in the global scope for that reason (as you never know what other files may bring into globals as well). Thus if you're generating some classes it's always a good idea to move the shared part of the class name out of the loop. E.g. [like this](https://gist.github.com/seven-phases-max/033091da35104481e606). — seven-phases-max, Mar 29 '15 at 17:24
Also don't miss the ["iterating through a list without loop"](http://stackoverflow.com/questions/26435049) design pattern. — seven-phases-max, Mar 29 '15 at 17:27

score 2 · Answer 1 · answered Mar 29 '15 at 20:51

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;
}

Yes I could use this loop technique, but the .for() mixin is short and clear — Lolo, Mar 30 '15 at 07:37

Less - Strange Prepros compilation

1 Answers1