如何根据变量将我的 .scss 文件编译成多个 .css 文件答案

【问题标题】：How do I compile my .scss file into multiple .css files depending on the variables如何根据变量将我的 .scss 文件编译成多个 .css 文件
【发布时间】：2018-08-25 04:32:25
【问题描述】：

我有一个简单的 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 等，$brand-primary 值等于先是#b0b0b0，然后是#b1b1b1，然后是#b2b2b2。

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

PS：我知道 CSS 变量，但是这些变量不适用于像 darken($brand-primary, 10%); 这样的颜色函数

【问题讨论】：

标签： css sass gulp

【解决方案1】：

纯粹以编程方式完成您所要求的事情将非常困难。我什至不确定这是否可能。

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

$brand-primary: #b0b0b0;

@import 'style';

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

【讨论】：