Gulp S CSS Цветовые переменные до css - PullRequest
Новая
       31

Gulp S CSS Цветовые переменные до css

0 голосов
/ 20 марта 2020

У меня есть css файл с более чем 20 строками цветовых переменных. Я хочу создать файл css с этими переменными, чтобы иметь один класс для цвета и класс для фона.

Пример:

из s css переменная 

$color-red: #FF0000;

до css

.color-red { color:#FF0000; }
.bg-color-red { background-color:#FF0000; }

Есть ли плагин Gulp, который позволяет мне это делать? Любая рекомендация принята, но мне нужно сделать это с глотком, если это возможно.

1 Ответ

0 голосов
/ 20 марта 2020

Как предположил @chriskirknielsen, хорошие карты здесь - это sass maps и правило @each. Я впервые использую эти концепции, но в моем тестировании это работает.

Ваш файл colors.scss будет выглядеть следующим образом: 

$colors: ("color-red": "#FF0000", "color-green": "#00ff40");  // etc.

@each $color, $value in $colors {
  .#{$color} {
    color: #{$value};
  }
  .bg-#{$color} {
    background-color: #{$value};
  }
}

Вывод gulp-sass в colors.css is: 

.color-red {
  color: #FF0000; }

.bg-color-red {
  background-color: #FF0000; }

.color-green {
  color: #00ff40; }

.bg-color-green {
  background-color: #00ff40; }

См. https://sass-lang.com/documentation/values/maps#do что-то для каждой пары

...