Less Mixin 迭代无限（循环）

Question

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

我的代码：

@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 函数的索引使用一些数学运算来完成此操作。在下面的代码片段中，我使用 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;
}

正如 seven-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;
}

Less Mixin 迭代无限（循环）

Less Mixin iteration infinite (circular loop)

css

loops

less

mixins

less-mixins