Adding Compass to gulpfile.js

sage
3

Hi @deschet,

Austins solution will work but you don’t have to sacrifice the speed of node just to use compass, in fact you don’t need ruby atall.

First off you just need to install the NPM compass-mixins package.

npm install compass-mixins --save-dev

Then you will need to add a extra line to your gulpfile.js

var cssTasks = function(filename) {
  return lazypipe()
    .pipe(function() {
      return $.if(!enabled.failStyleTask, $.plumber());
    })
    .pipe(function() {
      return $.if(enabled.maps, $.sourcemaps.init());
    })
      .pipe(function() {
        return $.if('*.less', $.less());
      })
      .pipe(function() {
        return $.if('*.scss', $.sass({
          outputStyle: 'nested', // libsass doesn't support expanded yet
          includePaths: [
		   './node_modules/compass-mixins/lib' // Add this bit just here =D
		  ],
          precision: 10,
          errLogToConsole: !enabled.failStyleTask
        }));
      })
      .pipe($.concat, filename)
      .pipe($.pleeease, {
          browsers: [
            'last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4',
            'opera 12'
          ],
          minifier: argv.production,
      })
    .pipe(function() {
      return $.if(enabled.rev, $.rev());
    })
    .pipe(function() {
      return $.if(enabled.maps, $.sourcemaps.write('.'));
    })();
};

And there you go, you can now use Compass mixins in your sass files just as you did previously but without Ruby or the slooowwww that comes with it.

Just add @import “compass”; to the top of your sass file and your all set.

I use the exact same process to add suzy to the mix for snazzy grid logic.

8 Likes