Less Mixin iteration infinite (circular loop)

Question

How do I iterate a mixin-loop without stop? Let's say I have an array with four colors. When it iterate to the last color, it begins with the first color and so on and fourth.

My code:

@array: blue, red, green, yellow;

.color-mix(@i) when (@i > 0) {
  ul {
    li:nth-child(@{i}) {
      .background-color(extract(@array, @i);
    }
  }
.color-mix(@i - 1);
}

.color-mix(4);

Will only iterate four times, If I add more iterations it will break because the color-array is only four colors, am I correct? But how do I do an infinite loop?

Answer 1

You can do this using a bit of math on the index that is passed to the extract function. In the below snippet, I've used the mod function to make sure the index is always between 1 to length(@array) irrespective of what the value of @i is.

The mixin will adapt even if the no. of values in the @array variable increases as I've used the array length instead of hard-coding values.

@array: blue, red, green, yellow, orange;
.color-mix(@i) when (@i > 0) {
  ul {
    li:nth-child(@{i}) {
      @temp: mod(@i - 1, length(@array)) + 1; /* for the cycle */
      @color: extract(@array, @temp); /* usage of separate var is personal preference */
      .background-color(@color); /* replace mixin with prop-value if mixin does only this */
      &:hover{
        .background-color(darken(@color, 5.5%));
      }
    }
  }
  .color-mix(@i - 1);
}

.color-mix(8); /* you can give any number here and it will iterate in a cyclic manner */

.background-color(@color){
  background: @color;
}

---

Also as seven-phases-max correctly points out in his comment, using nth-child(an + b) is a much better choice than nth-child(n) for producing repeated patterns (cyclic loop).

@array: blue, red, green, yellow, orange;
.color-mix(@i) when (@i > 0) {
  ul {
    @index: unit(length(@array), n) ~"+" @i;
    li:nth-child(@{index}) {
      @color: extract(@array, @i);
      .background-color(@color);
      &:hover{
        .background-color(darken(@color, 5.5%));
      }
    }
  }
  .color-mix(@i - 1);
}

.color-mix(length(@array));

.background-color(@color){
  background: @color;
}