@sasha_jarvi

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

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

<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
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 1
@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)));
      }
    }
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы