Unable to execute a Less CSS loop properly

Question

I'm trying to create different loops (the class should have a different background colours), but I'm able to only compile the first one.

Here's an example: http://codepen.io/anon/pen/MyWgdo?editors=1100

And the code that i'm using:

@temp0-9: #1976d2;
@temp10-20: #00bcd4;
@gap1: 10;
@gap2: 10;


.first (@i) when (@i > 0) {
  span.temp-@{i} {
    display:block;
    background: @temp0-9;
  }
  .first(@i - 1);
}
.first(@gap1);

.second (@i) when (@i > 15) {
  span.temp-@{i} {
    display:block;
    background: @temp10-20;
  }
  .second(@i - 1);
}
.second(@gap2);

The compiled result is the following:

 span.temp-9 {
  display: block;
  background: #1976d2;
}
span.temp-8 {
  display: block;
  background: #1976d2;
}
span.temp-7 {
  display: block;
  background: #1976d2;
}
span.temp-6{
  display: block;
  background: #1976d2;
}
span.temp-5{
  display: block;
  background: #1976d2;
}
span.temp-4{
  display: block;
  background: #1976d2;
}
span.temp-3{
  display: block;
  background: #1976d2;
}
span.temp-2{
  display: block;
  background: #1976d2;
}
span.temp-1{
  display: block;
  background: #1976d2;
}
span.temp-0{
  display: block;
  background: #1976d2;
}

Only 10 entries instead of 20 that I was expecting.

Any help?

if i change @i to 0, the dark blue is not displayed and the compiled result is not temp-{from 0 to 20} but only temp-{0-9} repeated twice: http://codepen.io/anon/pen/MyWgdo?editors=1100 — Nick, Feb 26 '16 at 16:09
Well that doesn't change the fact that the input is less than 15, does it? Anyway, what is the output that you are expecting? — Harry, Feb 26 '16 at 16:11
same as the one before, but having span.temp-0 to span.temp-9 with this background: #1976d2 (dark blue) and span.temp-10 to span.temp-20 with this other color: #00bcd4(light blue) — Nick, Feb 26 '16 at 16:12

Harry · Accepted Answer · 2016-02-26T18:15:31.557

You've got your loop's guard conditions wrong. The guard condition states that loop will be executed only when input (@i) is greater than 15 but the value that is passed as input (@gap2) is only 10 and hence the loop never gets executed.

For the output that you are expecting, change the guard condition like in the below snippet. Now, the guard is @i > 0 and so the loop will get executed but the selector interpolation in the 2nd mixin uses the @j variable (which is @i + @gap1). Since we are adding @gap1 to the loop's index, the no. value appended to the selector will be greater than 10 for the second loop.

@temp0-9: #1976d2;
@temp10-20: #00bcd4;
@gap1: 10;
@gap2: 10;

.first (@i) when (@i > 0) {
  span.temp-@{i} {
    display:block;
    background: @temp0-9;
  }
  .first(@i - 1);
}
.first(@gap1);

.second (@i) when (@i > 0) {
  @j: @i + @gap1;
  span.temp-@{j} {
    display:block;
    background: @temp10-20;
  }
  .second(@i - 1);
}
.second(@gap2);

Demo @ Less2CSS.org

If you have multiple such gaps, then writing a single loop (with complex logic) would be better than writing multiple loop mixins. Below is a sample:

@gaps: 46, 19, 3, 4, 4, 14; /* the gap array */
@temps: red, crimson, orange, gold, yellow, green; /* the temps corresponding to each gap */

.gaps-loop(@i, @prevgap) when (@i > 0){
  @gap: extract(@gaps, @i); /* extract each gap one by one based on loop index */
  @temp: extract(@temps, @i); /* extract the temp corresponding to each gap */
  .span-gen-loop(@j) when (@j < @gap){
    /* loop to generate spans - executed as many times as @gap */
    @k: @j + @prevgap; /* add current index to previous gaps - this generates a running number from 0-90 */
    span.temp-@{k}{
      display:block;
      background: @temp;
    }
    .span-gen-loop(@j + 1);
  }
  .span-gen-loop(0);
  .gaps-loop(@i - 1, @prevgap + @gap); /* send current gap + previous gap(s) */
}
.gaps-loop(length(@gaps), 0); /* loop as many times as there are gaps */

Lets say that I need to have 6 gaps, and they are like this: gap1: 14 | gap2: 4 | gap3: 4 | gap4: 3 | gap5: 19 | gap6: 46 how would you do that? basically they are range of temperatures and the colors needs to change according to the temperature (0-100) — Nick, Feb 26 '16 at 16:21
It would be nice if the down voter cared enough about SO's quality to comment. Use your down vote for constructive criticisms, improving the quality and not trolling. — Harry, Feb 26 '16 at 17:50
Im going to try your solution soon and I'll let you.know. I upvoted your answer as at a glance it seams to work (I don't care if it messy as long as it works). I'll get back to you soon. Thanks for now — Nick, Feb 26 '16 at 17:53
Perfect. It is working as i wanted. Thanks again for your support and patience :) — Nick, Feb 26 '16 at 21:20

Unable to execute a Less CSS loop properly

1 Answers1