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};
  }
}

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

.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

1 个答案: