Migrating from compass to node-sass

Compass is long gone, Jan 16 2015 to be precise.

We at Instamojo were using it since 2012 and were linking the compiled CSS directly in the HTML without using webpack.

We wanted to reduce the size of initial css for a faster experience and load the route specific css dynamically via webpack. For this we have to switch over to node-sass.

Removing Compass

Primarily compass was used for prefixing the CSS3 properties. Since those are no longer needed now, i compiled a list of compass mixins that would need to be replaced:

  • @include box-shadow(VALUE); -> box-shadow: VALUE;
  • @include border-radius(VALUE); -> border-radius: VALUE;
  • @include background-image(VALUE); -> background-image: VALUE;
  • @include transform(VALUE); -> transform: VALUE;
  • @include transition(VALUE); -> transition: VALUE;
  • @include border-top-right-radius(VALUE); -> border-top-right-radius: VALUE;

So all i needed was find and replace this in my project.

// Compass mixin 
@include box-shadow(0 3px 15px 0 rgba(0,0,0,0.1));
// This becomes regular CSS without prefixes 
box-shadow: 0 3px 15px 0 rgba(0,0,0,0.1);

We used compass for generating image sprites too, so we moved to grunt-spritesmith for generating sprites.

The Performance difference after Migration

We saw a magnificent difference after moving to node-sass.

Using Compass it took 75 seconds
Using node-sass it took just 9.2 seconds

So its about ~88% faster compilation using node-sass than compass locally.

Then after pushing to CircleCI:

Using Compass it took 98.9 seconds
Using node-sass it took 10.4 seconds

CSS compilation became ~89% faster on CircleCI.

Gotta admit, it was kind of a fun little refactoring project. But it really feels great to take a step towards a more modern, JS/Node based front-end than being dependent on deprecated Ruby based Compass.

The code went live, yesterday morning 16th November ‘17.

A special thanks to @kingsidharth for encouraging and helping me to put my first story on Medium.