Define scss variable with gulp

sage
#1

I’m trying to implement this trick here but no idea how to fold that into Sage’s gulp file. Please help. TIA!

#2

I’m not sure of a scenario where you would need to set a variable in your gulp file but not in your SASS. However even with that, I need to ask the infamous question: what have you tried?

#3

Figured it out. Just added the call to header() before the sass block of cssTasks. I realize this runs regardless of the existence of *.scss files but this works. I’ll try to wrap it in a gulpif() as well.

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

var cssTasks = function(filename) {
  return lazypipe()
    .pipe(function() {
      return gulpif(!enabled.failStyleTask, plumber());
    })
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.init());
    })
    .pipe(function() {
      return gulpif('*.less', less());
    })
    .pipe( function() { return header('$themeColor: #ff99ff;\n'); })
    .pipe(function() {
      return gulpif('*.scss', sass({
        outputStyle: 'nested', // libsass doesn't support expanded yet
        precision: 10,
        includePaths: ['.'],
        errLogToConsole: !enabled.failStyleTask
      }));
    })
    .pipe(concat, filename)
    .pipe(autoprefixer, {
      browsers: [
        'last 2 versions',
        'android 4',
        'opera 12'
      ]
    })
    .pipe(cssNano, {
      safe: true
    })
    .pipe(function() {
      return gulpif(enabled.rev, rev());
    })
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.write('.', {
        sourceRoot: 'assets/styles/'
      }));
    })();
};

This was just a test but the real goal is to get an external link selector to include the correct domain.

a[href^="http://"]:not([href*="192.168.10.12"]),
a[href^="https://"]:not([href*="192.168.10.12"]),
a[href^="//"]:not([href*="192.168.10.12"]), {
    &:after {
      content: 'External';
    }
}