28 Mar 2013

Choosing a CSS Preprocessor

I’ve been needing to push my browser side development learning a bit more recently, and have started to dig into options surrounding modern CSS and JavaScript tools that are now available. In the case of CSS, there is a common trend of using CSS preprocessers to allow developers to maintain more concise source files to be generated into robust CSS.

There are multiple options for CSS preprocesors available today, but the two most popular at the moment appear to be Sass and Less. I am no CSS expert to difinitively state which is the “best” solution. Many blogs and conversations I’ve had recently point to Sass as having a far mor feature rich solution with powerful plugins that make your life much easier.

If all other things were equal, I’d most likely opt for Sass; however, the biggest drawback for me (at the moment) is how much overhead the tool brings to your project. My personal project I’m looking to use this tool within is based on the Java ecosystem. The build (SBT) and runtime environments will require the JVM, is primarily Linux based but don’t want to limit platform options, and is striving to remain relatively small, fast, easy and self contained.

Sass and some of the more notable plugins (compass and lucy) are implemented in Ruby. Making my project self contained would involve embedding JRuby and all the appropriate gem sources within my project’s build, as I don’t want to depend on an external C Ruby as a dependency. This is a decent sized footprint, but is also a performance overhead to my dev cycle that I’d prefer not to have.

Less is a little better in this regard. The preprocesser code is implemented in JavaScript, so embedding in the JVM build system requires a JavaScript interpreter like Rhino. It may not be blazingly fast… I don’t know as I’ve not used Rhino much, but I’ve heard annecdotal evidence that it is, possibly due to the simpler design. The overhead of getting this set up is also a bit less painful within the build tool (SBT) because others have already implemented plugins that can be referenced in the build definition and downloaded.