Set a variable while buiding SASS with gulp?

Question

I use the following in gulp to build a CSS file from a SASS (*.scss) file :

var gulp        = require('gulp')
  , sass        = require('gulp-sass');

var colortheme = 'blue';

gulp.task('build_css', function() {
  return gulp.src(['resources/assets/sass/app/' + colortheme + '.scss'])
             .pipe(sass())
             .pipe(gulp.dest('public/css/'));
} );

As you can see I use a different .scss file for each colortheme.

I would like to use only one .scss file but be able to pass the colortheme somehow as a parameter, so this can be used as a variable inside the .scss file.

Is this possible?

Answer 1

Considering that it's SCSS you can simply plop the variable definitions at the beginning of the file using gulp-header:

resources/assets/sass/app/theme.scss

.foo {
  color: $themeColor;
  font-family:$themeFont;
}

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var header = require('gulp-header');

var colortheme = 'blue';
var font = 'sans-serif';

gulp.task('build_css', function() {
  return gulp.src(['resources/assets/sass/app/theme.scss'])
   .pipe(header('$themeColor: ' + colortheme + ';\n' +
                '$themeFont: ' + font + ';\n'))
   .pipe(sass())
   .pipe(gulp.dest('public/css/'));
});