Is there a way to compile LESS files to CSS (so that every browser doesn't have to)?
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
I use SimpLESS - drag, drop, done.
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...