Using libsass with Foundation for Apps

By default Foundation for Apps uses Ruby Sass to compile your SCSS to CSS. This guide covers the conversion to libsass

I accept there are quite a few reasons that you might continue to use Ruby Sass, but if some of the missing features aren’t going to cause you any problems it’s much faster to compile using libsass. My compilation times dropped from around 8.3s using ruby sass to 1.4s using libsass. A huge benefit when you’re repeatedly waiting for your new style to show up during development.

Please note that this guide doesn’t yet generate source map files. However, instructions on how to do so can be found at the gulp-sass page.

[GARD]

Install gulp-sass

Gulp-sass is the gulp module for compiling sass using libsass. From the command line within your Foundation for Apps project directory, type:

npm install gulp-sass --save-dev

Edit gulpfile.js

There’s an existing block in your gulpfile that looks like this:

// Compiles Sass
gulp.task('sass', function() {
  return gulp.src('client/assets/scss/app.scss')
    .pipe($.rubySass({
      loadPath: sassPaths,
      style: 'nested',
      bundleExec: true
    })).on('error', function(e) {
      console.log(e);
    })
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie 10']
    }))
    .pipe(gulp.dest('./build/assets/css/'));
});

[GARD]

Replace it with this:

gulp.task('sass', function() {
  return gulp.src('client/assets/scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths,
      style: 'nested',
      errLogToConsole: true
    }))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie 10']
    }))
    .pipe(gulp.dest('./build/assets/css/'));
});

That’s It!

Make sure you re-load the foundation-apps watch script and you should now be compiling using libsass. I hope that’s helpful!

Updates

  • 8 March 2015 – I changed the new sass task so that errors are logged to console to prevent gulp-sass from stopping every time yoy make a mistake!

[GARD]


COMMENTS