Is there a way to compile LESS files to CSS (so that every browser doesn't have to)?

Question

I'm considering using LESS but I cringe at the thought of a browser having JavaScript disabled and my CSS not being readable (and the site looking awful).

Also, it offends the engineer in me to force every browser to "compile" that Less file to .css when we could just "compile" it once every-time we modify it.

Answer 1

Yes. You can use an app that auto-compiles LESS files to CSS on your development machine as you code. Then simply upload the generated CSS file to your server when you're done developing.

• Crunch! for Windows & Mac
• WinLess for Windows
• CodeKit for Mac

Answer 2

I use SimpLESS - drag, drop, done.

Answer 3

LESS comes with a binary (lessc) that lets you precompile your .less files. You use it as such:

 $ lessc styles.less > styles.css

But I think most people just use the lessc -w or lessc --watch command to recompile the CSS stylesheet automatically whenever the LESS file is updated. You can also have lessc minify the CSS, e.g. lessc -w -x.

Edit: Just to clarify, lessc comes with the server-side install (i.e. when you install less via the node.js package manager). But you can download it manually from GitHub.

lessc is located at /bin/lessc. This is of course a *nix binary (should also work for Mac), but there is a Windows binary (lessc.exe) based on dotless, which is another Windows LESS compiler.

Update: Use less-watch to automatically compile.

Alternatively, many developers these days use task runners like grunt to handle build automation (compiling, minify, testing, etc.). Using grunt-contrib-watch, grunt-contrib-less and grunt-contrib-livereload, you can really streamline your development workflow.

E.g. if you use yo to scaffold your new web project, it comes preconfigured to watch your LESS/CSS/JS/HTML files for changes and recompile the necessary parts of your project when needed. Simply run grunt serve, and you're ready to code without having to worry about manually compiling (LESS/SASS/CoffeeScript)/minifying/concatenating your code or refreshing your browser manually like a caveman...

Answer 4

There are a number of options for compiling LESS to CSS on the server, and the one you choose will probably depend on what you use for the rest of the site.

• If you use node.js, the original lesscss will do the job.
• If you use PHP, lessphp. It has a slightly rubbish API when it comes to passing variables in from PHP, but it does the job.
• If you use Ruby, SASS isn't LESS, but is so similar that when I switched from using SASS (personal project) to LESS (a PHP project at work) I didn't notice any differences other than the file extension. It also has a useful library of mixins - COMPASS. I haven't tried using them with LESS, but I expect they'd work. (Apparently LESS was originally Ruby, so there's probably an old compiler floating around somewhere too).
• If you use ASP.Net, there's .less. I haven't used this one, so I don't know how well it works.
• If you use Java, lesscss4j wraps up compiling with the original LESS and Java 6's built-in Rhino scripting environment.
• If you use Perl, there's a LESSp module in CPAN.