I wrote about Less.js when it was just about to be released, and in that post I made a bold statement saying that it was going to obsolete CSS. It’s hard to say how many people use LESS today, but I for one cannot imagine going back to vanilla CSS. Sure, I’ll write it if I have to – after all, LESS has exactly the same syntax – but surrendering the features of LESS really puts you at a disadvantage. Recently we’ve also had frameworks pop up that use LESS for their stylesheets, such as the very popular Bootstrap, made by developers at Twitter.
One thing that I wasn’t right about was the means of using LESS. I thought Less.js would be simply included into every page and run live. It’s certainly fast enough to do a great job, but the fact that there is still a tiny delay during the first load causes a psychological barrier. Including compiled CSS rather than a LESS file + JavaScript feels lighter and faster even if it doesn’t end up making a huge difference in performance. This is how most people seem to do it, and now with plenty of good compile options available for both Windows, Mac and Linux I recommend this route for anyone looking to get started.
Turning LESS into CSS
Here are some compilers you can use to turn LESS files into CSS:
-
Less.app (Mac OS X only) - this is what I use and it works beautifully in the background without any issues. Just add the LESS files and it will auto-compile them when they’re updated, so you just work with the LESS file as you would with CSS and then refresh the browser window when you make changes. Bryan, the creator of Less.app has another app called CodeKit in development which extends functionality to a bunch more languages like Sass and CoffeeScript.
-
SimpLESS (Windows, Lunux, Mac OS X) - haven’t tried this one but it should work on every platform and looks quite promising.
-
LiveReload (Mac OS X, Windows) - this app monitors your CSS file and reloads the stylesheet in your browser without refreshing the page. It also has an option to monitor and compile LESS files for you. I use this for reloading CSS, but not the compile feature, so can’t comment on that, but it’s worth getting just for the reload.