如何根据变量将.scss文件编译为多个.css文件

Question

我有一个简单的gulp构建来编译我的.scss文件：

gulpfile.js：

gulp.task('sass', function() {
  return gulp.src('app/assets/scss/**/*.scss')
    .pipe(gulp.dest('app/assets/css'))
});

...

index.scss：

$brand-primary: #b0b0b0;
// $brand-primary: #b1b1b1;
// $brand-primary: #b2b2b2;

...

在index.scss中，我有$brand-primary变量的多个版本，我希望文件可以编译，例如我希望gulpfile.js根据$brand-primary变量自动创建index.scss的多个版本：index-1.css，index-2.css，index-3.css等，{{1} }值首先等于$brand-primary，然后是#b0b0b0，然后是#b1b1b1。

我的想法是为我的模板创建多个颜色选项，而无需为每种颜色手动重新编译它。

PS：我知道CSS变量，但那些不能使用像#b2b2b2

这样的颜色函数

Answer 1

以编程方式完成你的要求是非常困难的。我甚至不确定它是否有可能。

为什么不创建3个index.scss文件，每个文件都有不同的$ brand-color，然后导入其中的所有其他内容。或者甚至更好地创建另一个文件，它将导入所有其他* .scss文件，然后只导入每个索引文件中的文件和颜色。所以你的索引文件看起来像这样：

$brand-primary: #b0b0b0;

@import 'style';

和_style.scss会拥有所有其他scss依赖项。