Using CSS Preprocessors

Jeff Croft wrote an article today outlining the various ways in which you can process LESS/SASS.

There’s a fair amount of confusion surrounding css preprocessors like Sassand less, and I think some of it has to do with the fact that there are so many different ways you can use them.

Of course he’s 100% right—and it doesn’t need to be confusing at all. When I was first trying this stuff this stuff out, it took me a long time to figure out the ‘best’ way to get my LESS processed into plain-old CSS and get my CSS up to the web server, and thence to the browser. I started compiling it with Javascript at the browser end—but that’s not at all what you want to be doing.

Very simply, here’s precisely what I do with all my WordPress sites:

  1. Write my css to LESS file— called style.less
  2. Use LiveReload to compile it immediately upon hitting save to a style.css file. Every time I hit save, my .css file automatically gets overwritten by the new changes.
  3. I commit both the .less file and the .css file to git and then to Github.

In doing it this way, WordPress never, ever needs to know I’m using LESS. I link to the style.css file in the header as normal, and LiveReload happily serves it up every time I hit save.

Just as easy as that.