SCSS中的颜色循环

Question

我想在SCSS中进行颜色排列

$my-colors: ("green", #008000),("blue",#0000ff), ("orange",#fca644);

使用此数组，我想为每列着色。想象一下，这些列的最小值为4，最大值为10，因此数组中定义的颜色应该重复。

我认为我们在SCSS上有一个非常好的方法。

Answer 1

您可以尝试以下解决方案：

$my-colors: ("green", #008000, "blue", #0000ff, "orange", #fca644);

@for $colIndex from 1 through length($my-colors) {
  table td:nth-child(#{length($my-colors)}n + #{$colIndex}) {
    color: unquote(nth($my-colors, $colIndex));
  }
}

使用此解决方案，您只需更改颜色数组（$my-colors）即可更改不同颜色列的顺序和数量。

以上代码的结果（CSS输出/ demo on JSFiddle）：

table td:nth-child(6n + 1) {
  color: green;
}
table td:nth-child(6n + 2) {
  color: #008000;
}
table td:nth-child(6n + 3) {
  color: blue;
}
table td:nth-child(6n + 4) {
  color: #0000ff;
}
table td:nth-child(6n + 5) {
  color: orange;
}
table td:nth-child(6n + 6) {
  color: #fca644;
}

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 6</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
    <td>Column 11</td>
    <td>Column 12</td>
    <td>Column 13</td>
  </tr>
</table>