Migrating from compass to node-sass

Ayushya Jaiswal

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.

Ayushya Jaiswal

Written by

I make a prettier Web, Frontend | ReactJS Developer, JS Ninja @instamojo #design #developer #frontend

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade