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: codepen.io/anon/pen/MyWgdo?editors=1100 — Nick
– Nick, Commented Feb 26, 2016 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
– Harry, Commented Feb 26, 2016 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
– Nick, Commented Feb 26, 2016 at 16:12

Harry · Accepted Answer · 2016-02-26 18:15:31Z

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

edited Feb 26, 2016 at 18:15

answered Feb 26, 2016 at 16:16

Harry

90.1k26 gold badges216 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nick Over a year ago

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)

Harry Over a year ago

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.

Nick Over a year ago

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 Over a year ago

Perfect. It is working as i wanted. Thanks again for your support and patience :)

Collectives™ on Stack Overflow

Unable to execute a Less CSS loop properly

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related