SASS Радужный фон упрощенный

Есть ли способ, которым я могу сжать это немного больше, поэтому все, что я должен добавить в этой строке:

background: linear-gradient(left, $rainbow-colors);

Должен ли я что-то здесь вкладывать?

@mixin rainbow($colors...) {
    @each $color in $colors {
      .#{$color} {
            background: $color; } 
    }
  }
$rainbow-red: red;
$rainbow-orange: orange;
$rainbow-yellow: yellow;
$rainbow-green: green;
$rainbow-blue: blue;

body {
  background: -webkit-linear-gradient(left, $rainbow-red, $rainbow-orange, $rainbow-yellow, $rainbow-green, $rainbow-blue);
}

1 ответ

Вам не нужно указывать каждый цвет как его собственную переменную. Список через запятую будет достаточно. (Также ваш код должен сказать to left, не просто left.)

body {
  $rainbow-colors: red, orange, yellow, green, blue;
  background: linear-gradient(to left, $rainbow-colors);
}
Другие вопросы по тегам