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?

Answer 1

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 */