Using Less css framework in production

Question

Few weeks back only, I came to know about LESS CSS. And it is exactly what I was thinking should be available while writing css code.

Now I am very eager to use it and want to apply this in production scenario, but there is a catch. To use LESS CSS, you have two options:
1. Include less.js in your web pages.
2. Precompile LESS files and then use.

First option I can not afford, because for that I need to use less.js of size upto 43 KB. This adda extra load when I am already using Jquery.

Second option looks promising, but the problem is, to code in production you can not compile your LESS every time to test it against changes. It should be seemless experience like what I do when i code CSS directly. I should write LESS and immediately it should reflect on pages.

So can anybody help me in setting up for this kind of workflow?

Any suggestions of other similar frameworks is appreciated.

Michel

I usually go halfway--use the JS file in development, then precompile before building for production. What development stack are you using? – Nannienanning

compile to css, as the answer says :) – Sidell

Answer 1

I use Less-PHP in development: each time I refresh my browser for testing after having modified the main .less file, the .css file is outputted.

Then in production I only have to copy the .css file as usual.

I won't ever use Less.js in production because it'll only work for users that have JS activated, will slow every user both for download times and rendering times when it's not necessary.

EDIT: there are also software that will wait for your LESS file to be modified and saved and will compile it when it happens. Again Less PHP can be setup once per project and will do the same, I prefer not to launch every day a daemon on my system if I can avoid it. I already have a firewall, AV, MSN, Dropbox, jabber client, copypaste utility, integrated SVN and so on running :)
EDIT in 2015: I've been using Prepros 4 for a while or would've used some grunt-based compiler instead. My colleagues've a few bugs with Prepros 5 so I haven't installed it yet (Prepros 5 is now a proprietary software, costs a few bucks. A very good investment imo)

EDIT2: Seems you're using Java. A little googling gives this solution: http://www.asual.com/blog/lesscss/2009/11/05/less-for-java.html

Lenard

@AndrewMarshall Thanks, I saw that only after having posted. Answer edited – Lenard

Answer 2

As you have stated using less.js in production is a bad idea. Just to add another idea if you're using Git you can generate the production CSS files as part of a pre-commit hook so that you don't have to do anything manually for production. I've written a bit about the workflow I use here - http://tjvantoll.com/2012/07/07/the-ideal-less-workflow-with-git/.

Salep

Yes why wouldn't you compile the less files during a commit – Hekking

@Hekking Compiling the files in a pre-commit hook ensures the css files are included in the commit. – Salep

Answer 3

I use Java too but the following is pretty much valid for any tech:

Development mode:

1. Include the less files, but do not include the generated css files
2. Run less js

Production:

1. Clean the generated css folder using ant
2. Use less rhino to compile the css files from less using ant
3. Include the generated css files, but do not include the less files

I do a few extra things like themes/skins which can easily be achieved using any build tool (ant, maven, ...). I also let my system ignore the versionning of the generated folder as it will be deleted and generated by the build process.

Mcfarlane