Migrating from compass to node-sass
Compass is long gone, Jan 16 2015 to be precise.
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.
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:
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.
So its about ~88% faster compilation using node-sass than compass locally.
Then after pushing to CircleCI:
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.