Question

如何不间断地迭代mixin-loop？假设我有一个有四种颜色的数组。当它迭代到最后一种颜色时，它以第一种颜色开始，依此类推，第四种颜色。

我的代码：

{{1}}

只会迭代四次，如果我添加更多的迭代它会破坏因为颜色数组只有四种颜色，我是否正确？但是我该如何进行无限循环？

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

同样，正如七阶段最大值在他的评论中正确指出的那样，使用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迭代无限（循环循环）

1 个答案: