Css 更少的混合迭代无限（循环）

如何不停地迭代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);

---

将只迭代四次，如果我添加更多的迭代，它将中断，因为颜色数组只有四种颜色，对吗？但是如何实现无限循环呢？

您可以通过对传递给

extract

函数的索引进行一些数学运算来实现这一点。在下面的代码片段中，我使用了

mod

函数来确保索引始终在1到

length（@array）

之间，而不管

@I

的值是多少

当我使用数组长度而不是硬编码值时，即使

@array

变量中的值数量增加，mixin也会适应

@数组：蓝、红、绿、黄、橙；
。当（@i>0）时的颜色混合（@i）{
保险商实验室{
李：第n个孩子（@{i}）{
@temp:mod（@i-1，长度（@array））+1；/*用于循环*/
@颜色：extract（@array，@temp）；/*单独变量的使用是个人偏好*/
.background color（@color）；/*如果mixin仅执行此操作，则将mixin替换为prop值*/
&：悬停{
.背景色(较深(5.5%);；
}
}
}
。颜色组合（@i-1）；
}
.颜色混合（8）；/*您可以在这里给出任何数字，它将以循环方式迭代*/
.背景色（@color）{
背景：@颜色；
}

---

同样，正如seven Phase max在其评论中正确指出的那样，使用

n个孩子（an+b）

比

n个孩子（n）

更好地生成重复模式（循环循环循环）

@数组：蓝、红、绿、黄、橙；
。当（@i>0）时的颜色混合（@i）{
保险商实验室{
@索引：单位（长度（@array），n）~“+”@i；
li:n子（@{index}）{
@颜色：提取（@array，@i）；
.背景色（@color）；
&：悬停{
.背景色(较深(5.5%);；
}
}
}
。颜色组合（@i-1）；
}
.颜色混合（长度（@array））；
.背景色（@color）{
背景：@颜色；
}

我很好奇，除非你想破坏别人的系统，否则你为什么要这么做。@Harry，我不想。但假设我有一个未排序的列表，我想将颜色添加到它的背景中，当它超过四个li元素时，我想它再次从第一个颜色开始。。。你明白我的意思吗？好的，当它迭代到最后一种颜色时，你会看到更多，它从第一种颜色开始，依此类推第四种颜色。而不是一个真正的无限循环，对吗？我的意思是，你在寻找的更多的是一个循环，而不是一个无限？哈利，是的，差不多。环形线圈听起来更方便…谢谢。它是有效的。。。不过只有一个问题。在悬停状态下，我有：。背景色（变暗（提取（@array，@I），5,5%）…出现语法错误。为什么？@pirl:不客气。说到这个问题，你的意思是你对每一个

li

都这样做吗？如果是，给我一点时间，我会在回答中加上。这对我的口味来说是相当冗长的，可以改为。另外，重要的是要注意，如果是圆形（或任何属性）分配使用第n个子项（Xn+Y）比只使用第n个子项（X）更有效。您在@seven-Phase-max两个方面都是对的。mod函数修复是我在回答中提到的挂起的。我不知道我是如何忘记ax+b模式的。我将在早上进入系统时更新回答：）