Gulp SCSS 颜色变量到 css

Question

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

例子：

来自 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中的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