Recently we’ve decided a change in preprocessor to help optimise our workflow.

Within this blog post, I am going to type Sass, but really I mean Scss.

Originally we were using Less as it was quicker and easier to set up. No server side set up or SSH access needed to the server it was running on; you just needed to include the javascript file. We never used less.js in a production environment - instead we compiled offline before launch and we maintained and supported the site in raw CSS.

This gave us the advantage of using Less during development, with the variables and mixins but also the speed advantages of having a compiled, semi-minified CSS file on the live site.

The problem with this was that post launch, we lost the variables and mixins within Less - simple things such as adding a border-radius or finding out the main @brand colour became tedious.

The plan was to move to a command line compiler - allowing the Less to be compiled on save and the fully minified CSS to be used on the site during both development and once the site is live.

The compiler needed to be command line as we have our development servers local to the network, not out machines.

I started looking into command line compiler for Less - these are few are far between and the lessc node compiler doesn’t have a watch option. I eventually stumbled across a Dead-Simple-LESS-Watch-Compiler from jonycheung - I forked and modified it with some small updates. This uses node to detect the changes and recompile less - this had quite a bit CPU overhead on the servers.

I kept looking for alternatives but nothing struck me as being the one. I hunted round and slowly learned and borrowed code and, with enough knowledge gained, managed to put together a pure bash script that used inotifytools to watch the files. We used this for several months as we slowly tweaked and optimised our workflow. This can be found on github: less-watch.

**More about this can be **read here

This still wasn’t perfect and could be temperamental - it would sometimes take a while to compile and required a specific folder structure to run.

In the back of my mind I had been looking at Sass for a while. I was initially put off as at the start it was a big step to go from including less.js to command line compiling - but as we were compiling Less on the command line now, even our programmer pointed out:

If you’re compiling Less on the command line - you may as well use Sass

#css #javascript #sass