Gulp SCSS 颜色变量到 css

Question

我有一个包含 20 多行颜色变量的 scss 文件。我想用这些变量创建一个 css 文件，其中一个 class 用于颜色，class 用于背景颜色。

示例：

来自 scss 变量

$color-red: #FF0000;

到css

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

是否有任何 Gulp 插件允许我这样做？接受任何推荐，但如果可能的话，我需要用 gulp 来完成。

Answer 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

Gulp SCSS 颜色变量到 css

Gulp SCSS Color Variables to css

css

sass

gulp