Gulp SCSS 颜色变量到 css

【问题标题】：Gulp SCSS Color Variables to cssGulp SCSS 颜色变量到 css
【发布时间】：2020-03-19 21:15:46
【问题描述】：

我有一个包含超过 20 行颜色变量的 scss 文件。我想用这些变量创建一个 css 文件，以便有一个颜色类和一个背景色类。

示例：

来自 scss 变量

$color-red: #FF0000;

到css

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

是否有任何 Gulp 插件可以让我这样做？接受任何建议，但如果可能的话，我需要用 gulp 来做。

【问题讨论】：

这是 Sass 用户希望我在不久前遇到的一个常见问题：使用 Sass 映射而不是每种颜色的变量！您可以通过这种方式轻松循环地图。

标签： css sass gulp

【解决方案1】：

正如@chriskirknielsen 建议的那样，sass 映射和@each 规则在这里是一个不错的选择。这是我第一次使用这些概念，但这在我的测试中有效。

您的colors.scss 文件如下所示：

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

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

colors.css 中的gulp-sass 输出为：

.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-something-for-every-pair

【讨论】：