到CSS的Gulp SCSS颜色变量

问题描述 投票:0回答:1

我有一个scss文件,其中包含20行以上的颜色变量。我想用这些变量创建一个css文件,以便为颜色提供一个类,为背景颜色提供一个类。

示例:

来自scss变量

$color-red: #FF0000;

至CSS

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

是否有任何Gulp插件允许我执行此操作?任何建议都可以接受,但如果可能的话,我需要用一口喝。

css sass gulp
1个回答
0
投票

正如@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

© www.soinside.com 2019 - 2024. All rights reserved.