将SCSS颜色变量吞入css

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

示例：

来自scss变量

$color-red: #FF0000;

到css

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

有没有什么可以让我这么做的Gulp插件？

---

任何建议都可以接受，但如果可能的话，我需要大口喝。

正如@chriskirknielsen所建议的，sass地图和

@每个
规则在这里都是一个不错的选择。这是我第一次使用这些概念，但这在我的测试中起作用

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

请参见
这也是我不久前遇到的Sass用户希望看到的一件常见事情：使用Sass贴图，而不是每种颜色的变量！这样你就可以轻松地在地图上循环。