问题
I usually develop LESS code using JS compiler in DEV environment, so I compile CSS only when going to PRODUCTION one.
I have 2 needs compiling LESS into CSS:
- Compile LESS not automatically, but only when I manually want to do it, but using always last version of compiler released (often tools like WinLess have not up-to-date versions)
- Auto-merging media queries (using media queries inside nested rules, results in numerous repetition of the same media query. Compiler should detect it and group all css declaration inside a unique media query )
How to do that? (possibly without node.js, I don't have it)
回答1:
Less runs inside 3 environments: Node, browser and inside Rhino. Currently there is no Rhino support for v2, alternatively you can use https://github.com/SomMeri/less4j, see How do I build the Rhino specific versions of less?.
Some PHP ports are available at http://lessphp.gpeasy.com/ and http://leafo.net/lessphp. Both ports seem not to be able to run the latest version of Less. Also @media merging does not work with PHP, see: Group multiple media queries formed as output of LESS css
I wrote "possibly without node.js" :D Anyway.... I read about possibility to use Grunt instead to do the same task. Please, what's the difference between two approaches? thanks
Grunt (and Gulp) are both JavaScript task runners and require Node.js too:
Grunt and Grunt plugins are installed and managed via npm, the Node.js package manager. Grunt 0.4.x requires stable Node.js versions >= 0.8.0.
No, the easiest way to solve your issues is getting Node.js:
- Install Node.js (which includes npm), see https://nodejs.org/download/
- Then you in your console (command prompt)
npm install -g less. Mac users should run the Terminal.app and Windows users can use thecmdcommand.
Now you can compile your less files as follows:
>> lessc main.less main.css
Auto-merging media queries:
Clean-css supports @media merging since v3, and so does the less-plugin-clean-css. So run in your console:
- npm install -g less-plugin-clean-css
Now you can compile your less files as follows:
>> lessc --clean-css="advanced" main.less
less-plugin-clean-css sets the --skip-advanced true by default you should explicit set the advanced option for @media merging
来源：https://stackoverflow.com/questions/28044537/lesscss-how-to-compile-using-last-version-and-grouping-media-queries