Less Mixin 迭代无限（循环循环）

Question

如何不停地迭代 mixin 循环？假设我有一个有四种颜色的数组。当它迭代到最后一种颜色时，它会从第一种颜色开始，依此类推，第四种。

我的代码：

@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);

只会迭代四次，如果我添加更多迭代它会中断，因为颜色数组只有四种颜色，我正确吗？但是如何进行无限循环呢？

Answer 1

您可以对传递给extract 函数的索引进行一些数学运算。在下面的 sn-p 中，我使用了 mod 函数来确保索引始终在 1 到 length(@array) 之间，而不管 @i 的值是什么。

即使没有，mixin 也会适应。 @array 变量中的值随着我使用数组长度而不是硬编码值而增加。

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

---

正如 7-phases-max 在他的评论中正确指出的那样，使用nth-child(an + b) 是比nth-child(n) 产生重复模式（循环循环）更好的选择。

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