0

我想在 SCSS 中做一组颜色

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

使用这个数组,我想为每一列着色。假设列的最小值为 4,最大值为 10,因此数组中定义的颜色应该重复。

在此处输入图像描述

我认为我们有一个非常好的方法可以在 SCSS 上做到这一点。

4

1 回答 1

2

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

$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) 即可更改不同颜色列的顺序和数量。

上述代码的结果(JSFiddle 上的 CSS 输出/演示):

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>

于 2018-08-17T10:29:33.423 回答