Gulp-sass: Pass variables to Sass

[kiki-le-singe]

Hello,

Is it possible to pass any variables to the sass files ?

example:

gulp task:

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassConfig = require('./config').sass;
var fontsConfig = require('./config').fonts;

gulp.task('sass:dist', function () {
  return gulp.src(sassConfig.mainSassFile)
    .pipe($.sass())
    .pipe($.preprocess({context: {PATH: '../../bower_components/foundation-icon-fonts/icons'}}))
    .pipe($.concat('main.min.css'))
    .pipe($.minifyCss())
    .pipe(gulp.dest(sassConfig.dist.dest));
});

variable sass:

$fi-path: 'PATH';

Thanks for your help

[Keats]

All gulp-sass is doing is calling node-sass.
Looking at https://github.com/sass/node-sass it doesn't seem like it's able to do that.

You can try using something like https://www.npmjs.com/package/gulp-replace to replace a string in your sass file before compiling them

[kiki-le-singe]

Hello @Keats
Thanks for your help. I used the gulp-preprocess package. It allows to do that:
.pipe($.preprocess(context: {PATH: '../../pathIconFontDevEnvironment'}}))

gulp.task('sass:dev', function () {
  return gulp.src('srcPath')
    .pipe($.sass())
    .pipe($.preprocess({context: {PATH: '../../pathIconFontDevEnvironment'}}))
    .pipe(gulp.dest('dirPath'));
});

sass file:

$icon-path: '/* @echo PATH */';

[sgarbesi]

@kiki-le-singe Why would you use preprocess after calling sass()? Shouldn't it be the other way around?

[kiki-le-singe]

@sgarbesi I think it does not matter. It works in both ways. I don't remember why I did it in that order. You should try it.

[yairEO]

@kiki-le-singe - sure it matters

[kiki-le-singe]

@yairEO ok thanks for your return :)