Migrating from compass to bourbon

Three years ago we went from writing CSS and dealing with browser prefixes manually to use a framework who can help us bringing all the cool things of css like gradients, box-shadow, border-radius and more, at that time the best option was using Compass and Sass. It blow the way we worked.

Compass let us use in a simple way all the new prefixes and css code for different browsers. Moving from CSS to SASS allows us to reduce up to a 50% of the core we were writing in pure CSS. Also with the identation and the lack of semicolons the language looks more like Python so we end up writing more code than before and enjoying the process a lot more.

Time has passed and compass / sass duo became very slow, as the code base grew, and using Docker as our development environments we cannot use anymore livereload to speed up our frontend development process, before when we make some change to our SASS code it took a few seconds to compile and see it on the browser, but now it was something that could take 20 or more seconds each time we did a change.

Since we like to move fast we started looking for options. First we realized SASS compilation was taking too long, so we found there is a newer implementation in pure C rather than Ruby, which was the cause for it to be so slow, so we started looking at SASSC and the speed came back from 20 seconds to under a second. It is extremely fast and we do like fast tools to work with.

Compass needed to support SASSC in order to use it the way we were used to, but looking at the development speed on their github repo it seems more like a dead project, so we decided to look elsewhere and we found Bourbon. Such a lucky day for us.

Bourbon gives us all we had in Compass, can be used with SASSC, so it is extremely fast, and the best of all is that the generated code is less than the same code we used to have when working with compass, so we made the switch right away and we LOVE it.

There was a lot of changes in this migration, but the most time consuming change was the gulpfile.

We had this before:

var gulp = require('gulp');
var compass = require('gulp-compass');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var plumber_options = {
    errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }
}
var compass_options = {
    config_file: 'app/static/config.rb',
    css: 'app/static/css',
    image: 'app/static/img',
    sass: 'app/static/sass',
    font: 'app/static/fonts',
    bundle_exec: true,
    sourcemap: true
}
gulp.task('compile-sass', function() {
    return gulp.src('app/static/sass/*.sass')
        .pipe(plumber(plumber_options))
        .pipe(compass(compass_options))
        .pipe(livereload());
});

And now we have this:

var gulp = require('gulp');
var livereload = require('gulp-livereload');
var plumber = require('gulp-plumber');
var shell = require('gulp-shell')
var plumber_options = {
    errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }
}
var shell_options = {
    templateData: {
        f: function (s) {
            console.log(s);
            return s.replace(/sass/g, 'css')
        }
    }
}
gulp.task('sassc', function() {
    return gulp.src(['app/static/sass/*.sass', '!app/static/sass/_*.sass'], {read: false})
        .pipe(plumber(plumber_options))
        .pipe(shell('sassc -m <%= file.path %> <%= f(file.path) %>', shell_options))
        .pipe(livereload());
});

If you are thinking about doing the transition, no matter if you use Bourbon or not, we can tell you SASSC is the fastest option you can take at this time.