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

Question

I have a simple gulp build to compile my .scss files:

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;

...

In index.scss I have multiple versions of the $brand-primary variable I want the file to compile with, eg I want gulpfile.js to automatically create multiple versions of index.scss depending on the $brand-primary variable: index-1.css, index-2.css, index-3.css, etc. with the $brand-primary value equal to #b0b0b0 first, then #b1b1b1 , then #b2b2b2 accordingly.

The idea is to create multiple color options for my template without manually recompiling it for each color.

PS: I am aware of CSS variables, however those won't work with color function like darken($brand-primary, 10%);

Answer 1

It would be very hard to do what you ask purely programatically. I'm not even sure it's possible.

Why don't you just create 3 index.scss files each with different $brand-color and and then import everything else in them. Or even better make another file which will import all of your other *.scss files and then just import that file and color in each index file. So your index files would look like this:

$brand-primary: #b0b0b0;

@import 'style';

and _style.scss would have all of your other scss dependencies.