Pass variables to Sass

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

[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?