CSS preprocessing without the pain: 5 best compilers


Need to make your CSS better and easier to process.Check out these command line-avoiding IDEs and compilers



For the not-so-epic price of $32 – just over £21 – CodeKit gives you a tool that compiles everything from an editor window.

LESS, Sass and Stylus are just the start. It also handles CoffeeScript, TypeScript, JavaScript, Slim, various HTML preprocessors including Haml and Jade, oh – and Markdown.
And there’s more! The Foundation web framework, Bourbon, and Compass are built in, as is Autoprefixer. So you get to use all of that mixin goodness with almost no effort.
And the Sass compiler is the superfast libSass, which means you won’t have to wait around for vanilla CSS to come out the other end.

If you want a good JavaScript editor, CodeKit automatically checks your JS for errors, so you won’t spend hours hunting down missing semicolons. If you have no idea what most of these do, you can ignore them. If you do, you’ll love the fact that you get everything in one place, with no need to drop down to the command line or set up your own task runner. Minification and file joining are also available, so you can check distribution sizes before you ship. Lossless image optimisation is also built in for JPGs and PNGs.
It even includes a browser update feature, so changes automatically update in your development browser windows. The Bower component library is also included so you can download and install useful frameworks with a few mouse clicks. The downside? It’s Mac only. Windows and Linux people are out of luck.


A freebie take on CodeKit, Koala works on Linux and Windows as well as on Mac.

It can handle LESS and Sass (with Bourbon) but there’s no Stylus support. So it’s not as sophisticated as a commercial IDE, but it is cross-platform. And did we mention that it’s also free?


For a different take on preprocessors, try Codepen’s live code compiler.

It’s an easy to use but full-featured web designer’s playpen. Choose between Sass, SCSS, LESS and Stylus, and select various mixins and addons using menus. Experiment with prefix-free syntax or add Autoprefixer support.


Another compiler-of-compilers, LiveReload offers Sass, LESS, Compass, Stylus, and a slew of JS and HTML preprocessors – all-in-one handly package.

The price? It’s $9.99 (£7.99) in the app store for OS X. But the source is free on GitHub, so if you have a copy of Xcode and building a project from scratch holds no fears for you, you can make your own version – although if you do you should still pay for a licence anyway, just because.Should you use it? It’s maybe a touch busier and less straightforward than the competition, but if you’re a code geek then you’ll find it easier to customise (if that’s what you need). It’s certainly worth a look, anyway.


Mixture used to be a commercial product, but now it’s been released for free. It’s a capable editor, template tool and preprocessor for Mac and Windows.

It covers all your preprocessing needs with Sass, Compass, LESS and Stylus. You can even combine code written for different preprocessors in a single project by using a special Mix mode. There’s also support for Autoprefixing, script linting, debugging, minification and concatenation. This is not at all bad for a permafree download, and certainly well worth a look so you can compare to it the paid-for competition and maybe save yourself a little cash.