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

嘿，这个多配色自动编译的需求我刚好做过，完全能满足你用Sass颜色函数的要求，给你一套可行的方案！

核心思路 #

我们要做的就是：定义好所有需要的配色方案，然后让Gulp遍历这些配色，动态修改SCSS里的$brand-primary变量值，再分别编译成对应命名的CSS文件。这样不用手动注释/取消注释变量，一键就能生成所有配色的CSS。

步骤1：安装必要的Gulp插件 #

首先确保你已经安装了基础的gulp和gulp-sass，还需要两个辅助插件：

• through2：用来在Gulp流中处理每个文件的克隆和修改

执行安装命令：

npm install gulp gulp-sass through2 --save-dev

步骤2：修改你的Gulpfile.js #

下面是完整的配置代码，我会逐段解释：

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const through = require('through2');

// 这里定义所有配色方案，后续加新配色直接加对象就行
const colorSchemes = [
  { suffix: '1', color: '#b0b0b0' },
  { suffix: '2', color: '#b1b1b1' },
  { suffix: '3', color: '#b2b2b2' }
];

gulp.task('sass:multi-theme', function() {
  return gulp.src('app/assets/scss/index.scss')
    // 遍历每个配色，克隆原文件并替换变量
    .pipe(through.obj(function(file, enc, cb) {
      colorSchemes.forEach(scheme => {
        // 克隆原SCSS文件，避免修改源文件
        const clonedFile = file.clone();
        
        // 替换所有$brand-primary行（不管是否注释）为当前配色的未注释变量
        clonedFile.contents = Buffer.from(
          clonedFile.contents.toString().replace(
            /\/\/?\s*\$brand-primary:\s*#[\da-fA-F]{6};/g,
            `$brand-primary: ${scheme.color};`
          )
        );
        
        // 修改文件名，比如index.scss → index-1.scss
        clonedFile.path = clonedFile.path.replace('index.scss', `index-${scheme.suffix}.scss`);
        
        // 将处理后的文件推入流中
        this.push(clonedFile);
      });
      cb();
    }))
    // 编译所有修改后的SCSS文件
    .pipe(sass().on('error', sass.logError))
    // 输出到CSS目录
    .pipe(gulp.dest('app/assets/css'));
});

// 设置默认任务，运行gulp命令就会执行多主题编译
gulp.task('default', gulp.series('sass:multi-theme'));

代码解释 #

1. colorSchemes数组：集中管理所有配色，suffix是输出CSS文件的后缀（比如index-1.css），color是对应的$brand-primary值，后续新增配色只需要在这里加对象，不用改其他代码。
2. through2处理流：对读取的index.scss文件进行克隆，每个配色对应一个克隆文件，这样不会修改源文件。
3. 正则替换变量：用正则匹配所有注释/未注释的$brand-primary行，统一替换成当前配色的未注释变量，确保编译时使用正确的颜色值。
4. 重命名文件：修改克隆后的文件名，编译后就会生成index-1.css、index-2.css等对应文件。

更稳妥的模板方案（可选） #

如果你觉得正则替换容易出错，可以把原index.scss改成模板文件（比如index-template.scss），里面只保留一行占位的变量：

// index-template.scss
$brand-primary: {{COLOR_PLACEHOLDER}};

// 其他SCSS代码，比如使用darken($brand-primary, 10%)这类函数
.header {
  background-color: $brand-primary;
  border-bottom: 1px solid darken($brand-primary, 10%);
}

然后修改Gulp任务里的替换逻辑，直接替换占位符：

// 替换部分的代码改成
clonedFile.contents = Buffer.from(
  clonedFile.contents.toString().replace('{{COLOR_PLACEHOLDER}}', scheme.color)
);
// 读取的源文件改成模板文件
return gulp.src('app/assets/scss/index-template.scss')

这样更清晰，完全不用担心正则匹配的问题。

为什么不用CSS变量？ #

正如你所说，CSS变量是运行时生效的，无法在Sass编译阶段配合darken()、lighten()这类颜色函数使用——这些函数需要在编译时计算出具体的颜色值，所以这种动态编译多个SCSS文件的方案是最适合你的场景的。

运行gulp命令，就能在app/assets/css目录下得到所有配色的CSS文件啦！

内容的提问来源于stack exchange，提问作者sdvnksv