Search code examples
lessgulpgulp-less

Can Gulp change LESS variables?


I'm looking to toggle IE8 mode in my LESS files and automated the file generation in Gulp.

This is where I stopped in what to pass gulp-less (minus a bunch of stuff):

var IE = true;

var LESSConfig  =  {
        plugins: [ ... ],
        paths: LESSpath,
        ie8compat: IE,  //may as well toggle this
        // Set in variables.less, @ie:false; - used in mixin & CSS guards
        // many variations tried
        // globalVars: [ { "ie":IE } ], 
        modifyVars:{ "ie":IE }
    };

...

.pipe( less ( LESSConfig ) )

Is variable modification not supported in Gulp?

I'd like to avoid using gulp-modify et al if I can. I'd like to keep the build system fairly abstracted from the source files.


Solution

  • modifyVars is working for me now:

        ...
    
        var LESSConfig = {
            paths: paths.LESSImportPaths,
            plugins: [
                LESSGroupMediaQueries,
                LESSautoprefix
            ],
            modifyVars: {
                ie: 'false'
            }
        };
    
        var LESSConfigIE = {
            paths: paths.LESSImportPaths,
            modifyVars: {
                ie: 'true'
            }
        };
    
        function processLESS (src, IE, dest){
           return gulp.src(src)
             .pipe( $.if( IE, $.less( LESSConfigIE ), $.less( LESSConfig ) ) )
             .pipe( $.if( IE, $.rename(function(path) { path.basename += "-ie"; }) ) )
             .pipe( gulp.dest(dest) )
        }
    
        // build base.css files
        gulp.task('base', function() {
             return  processLESS( paths.Base + '/*.less', false, paths.dest );
        });
    
         // build base-ie.css files for IE
         gulp.task('baseIE', function() {
             return  processLESS( paths.Base + '/*.less', true, paths.dest );
         });