Colors loops in SCSS

Question

I want to do an array of colours in SCSS

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

And with this array, I would like to colour each column. Imagining that the columns could have the minimum of 4 and the maximum of 10, so the colours defined in the array should repeat.

I thought we have a really good way to do this on SCSS.

Answer 1

You can try the following solution:

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

By using this solution you only need to change the array of the colors ($my-colors) to change the order and amount of different colored columns.

The result of the above code (CSS output / 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>