Как написать функцию SCSS для смены background-color от строки к строке?

Question

[sasha_jarvi]

Имеется таблица:

<table>
      <tr>
        <td>red</td>
      </tr>
      <tr>
        <td>orange</td>
      </tr>
      <tr>
        <td>yellow</td>
      </tr>
      <tr>
        <td>green</td>
      </tr>
      <tr>
        <td>blue</td>
      </tr>
      <tr>
        <td>indigo</td>
      </tr>
      <tr>
        <td>violet</td>
      </tr>
    </table>

Каждая строка имеет background-color, соответствующий определенному цвету радуги.
На данный момент задание свойства background-color для каждой строки выглядит следующим образом:

tr {
      &:first-child {
        background-color: adjust-hue($bg-base, 0deg);
      }
      &:nth-child(2) {
        background-color: adjust-hue($bg-base, 30deg);
      }
      &:nth-child(3) {
        background-color: adjust-hue($bg-base, 60deg);
      }
      &:nth-child(4) {
        background-color: adjust-hue($bg-base, 120deg);
      }
      &:nth-child(5) {
        background-color: adjust-hue($bg-base, 180deg);
      }
      &:nth-child(6) {
        background-color: adjust-hue($bg-base, 240deg);
      }
      &:nth-child(7) {
        background-color: adjust-hue($bg-base, 300deg);
      }
    }

Как задать background-color для каждой строки через функцию SCSS? Заранее спасибо.

Codepen: https://codepen.io/sasha_jarvi/pen/XwOywo

Answer 1

[Сергей delphinpro]

https://codepen.io/anon/pen/PvLweE?editors=0100

Comments

[sasha_jarvi]

Благодарю за ответ, помогло!

Answer 2

[sasha_jarvi]

@for $i from 1 through 7{
  tr{
    &:nth-child(#{$i}) {
      @if($i <= 2) {
        background-color: adjust-hue($bg-base, (30 * ($i - 1)));
      } @else {
        background-color: adjust-hue($bg-base, (60 * ($i - 2)));
      }
    }
  }
}