我有一个scss文件,其中包含20行以上的颜色变量。我想用这些变量创建一个css文件,以便为颜色提供一个类,为背景颜色提供一个类。
示例:
来自scss变量
$color-red: #FF0000;
至CSS
.color-red { color:#FF0000; }
.bg-color-red { background-color:#FF0000; }
是否有任何Gulp插件允许我执行此操作?任何建议都可以接受,但如果可能的话,我需要用一口喝。
正如@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