osaton / gulp-sass-variables

What is this

Add Sass variables to gulp stream, so that you can use for example environment variables in your Sass build process.

Supports strings, numbers and booleans.

Installation

$ npm install gulp-sass-variables --save-dev

Usage

gulpfile.js

var gulp = require('gulp'),
    argv = require('yargs').argv,
    sassVariables = require('gulp-sass-variables'),
    sass = require('gulp-sass');

// Compile css
gulp.task('css', function () {
  return gulp.src('./src/scss/master.scss')
             .pipe(sassVariables({
               $env: argv.production ? 'production' : 'development'
             }))
             .pipe(sass())
             .pipe(gulp.dest('./dist/css'))
});

master.scss

$env: 'development' !default;
$path: '/dev/path/' !default;

@if($env == 'production') {
  $path: '/prod/path';
}

gulp-sass-variables's Issues

Font stacks get quoted

gulp-util deprecated - use plugin-error instead

As outlined in https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5, gulp-util has been deprecated. The fix in this case is fairly simple: instead of using gutil.PluginError, we'll need to use the plugin-error dependency in its place (https://github.com/gulpjs/plugin-error).