Entering the world of SASSC and bourbon for a real project

We are all starting to ‘build’ our front-end resources. Some of us pre-compile Handlebars templates, some minify images and I even heard that some deal with cache-busting. We run all of those tasks thanks to this amazing tool called ‘Grunt’ that keeps on revolutionizing the front-end way of building websites.

Of course we both want to run these build tasks and use livereload to design in the browser. For a nice developer-experience, it needs to run fast.

Most of these tasks are okay in terms of speed, but when your Sass/Compass project reaches 4000 lines, you start to have performance issues (at the compile step and not in the css generated, this is another story).

I reached those 4000 lines of code on a project I was working on earlier this year. It took around 5 seconds to compile the scss files with compass. One of the guy working with me on the project (@damln) told me about this new Sass built with C, it sounded really sassy.

At that point, I met Libsass (it’s a good guy)

Libsass image

Enter libsass and Bourbon

I then started a complete re-factoring of the code using Bourbon as my ‘mixins-provider’ and building the scss with Libsass wrapped in a grunt-task (grunt-sass, and not grunt-contrib-sass which is based on the ruby version). The good thing about Bourbon is that their mixins are w3c compliant (something not absolutely true in compass) and they drop support for vendor-prefix at a good pace depending on each feature, your css is cleaner and up to date !

Dropping Compass for Bourbon was already a big win, the scss compile time went from 5 sec to around 2 sec.

So how does that look like ?

Compilation with sass without compass (the ruby version) :

ruby sass compilation

Compilation with sassc (the C version) :

ruby sass compilation

We came from 2290 ms to 288 ms ! This is a huge win for people who love to design in the browser.

What about the cons ?

Update 01/03/2014
Libsass now supports sourcemaps

If you look around in the github repos of libsass, grunt-sass or node-sass, you will find out that some features are missing or partially implemented. For instance, you won’t be able to take advantage of the nested @extend rules yet (the single class @extend works thought), sourcemaps are in the pipe but not there yet either.

Considering that, I never really had a blocking problem with libsass and it is 100% compatible with bourbon and bootstrap-sass. You sometimes might have to use some tricks to compile some old properties like this one :

.identifiant {
  filter: alpha(opacity=50);

/* To make the compilation pass */
.identifiant {
  filter: unquote("alpha(opacity=50);");

You will get all the assistance you need on the issue thread of the github repo dealing with libsass.

Hold your breath and…

Try libsass ! Installing the binaries is pretty easy (explanations here) and you can just try it with the grunt task :

npm install grunt-sass

and then add the task to your project gruntfile, like in this example : grunt-sass example

The roadmap of libsass is moving toward a 1:1 equivalence with the ruby version, and it is already looking pretty good, using libsass is something really refreshing !

Thanks @damln for sharing your knowledge on libsass ;)