Question

I’m interested in using a css preprocessor and am leaning towards LESS. I’m proficient at writing CSS myself, but want to take advantage of a few of the dynamic features. I’m not positive that adding constant extra steps in production (like compiling) are worth the benefit though.

I like LESS because I can use less.js to compile client-side (during development only), is there a tool out there though that would automatically detect the timestamp on my less file and compile it to css and overwrite the current css file? I’d love to achieve this level of transparency so I could worry about the code and less about compiling it and refreshing… Something similar to http://cssrefresh.frebsite.nl/ but combining a compiler with it? If not Is anyone interested in helping build it?

Answer 1

Less.js will already recompile if the source has changed — I have never had an issue with it being stale during development. I did end up switching to a compile-on-save workflow using textmate’s less bundle though wince switching out link tags before deployment and testing was getting annoying.

That being said I’m sure you could wire up something to watch the file on disk and invoke the node.js lessc compiler.

UPDATE TO CLARIFY DEV CYCLE:

During development I include the less.js file in the page and link to my styles.less file via <link rel="stylesheet/less" type="text/css" href="styles.less>

When I push out to production I change that to:

<link rel="stylesheet" type="text/css" href="styles.css">

But, during development, every time I save the styles.less file, I use a TextMate bundle to also compile down a styles.css file, so the change out is a matter of commenting/uncommenting in my source file.

I have the bundle set to use node.js lessc compiler with --compress set so it gives you a nice compact stylesheet.