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?

Wouldn't it make sense to build all your themes, as gulp is used primarly in development? Do you care that much? Otherwise, does this help? http://stackoverflow.com/questions/23023650/is-it-possible-to-pass-a-flag-to-gulp-to-have-it-run-tasks-in-different-ways — kasperoo, May 11 '16 at 22:10
Well, I used a simplified example. In reality I set *multiple* variables, which would result in very many different combinations, while only a few will be used (but I don't *exactly* know which ones, this depends on the building options that were set). So having a dynamic solution seems much better to me. — Dylan, May 11 '16 at 22:37

score 20 · Accepted Answer · answered May 12 '16 at 05:57

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/'));
});

Thanks so much, It really helped me to resolve multi team in css — Sivaraj-v, Jan 01 '22 at 04:09

Set a variable while buiding SASS with gulp?

1 Answers1