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>