LESSCSS：如何使用最新版本编译和分组媒体查询

Question

我通常在 DEV 环境中使用 JS 编译器开发 LESS 代码，所以我只在进入 PRODUCTION 环境时才编译 CSS。

我有 2 个需要将 LESS 编译成 CSS:

不是自动编译 LESS，而是仅当我手动想要编译时，但总是使用发布的最新版本的编译器（通常像 WinLess 这样的工具不是最新的版本）
自动合并媒体查询（在嵌套规则中使用媒体查询，导致多次重复相同的媒体查询。编译器应该检测到它并将所有 css 声明分组到一个唯一的媒体中查询 )

怎么做？（可能没有node.js，我没有）

Answer 1

在 3 个环境中减少运行s：Node、浏览器和 Rhino 内部。目前没有对 v2 的 Rhino 支持，或者您可以使用 https://github.com/SomMeri/less4j, see How do I build the Rhino specific versions of less?.

一些 PHP 端口在 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

G运行t（和 Gulp）都是 JavaScript 任务运行ners 并且也需要 Node.js:

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.

不，解决问题的最简单方法是获取 Node.js:

安装 Node.js（包括 npm），参见 https://nodejs.org/download/
然后你在你的控制台（命令提示符）npm install -g less。 Mac用户应该运行，Terminal.app和Windows用户可以使用cmd命令。

现在你可以编译你的 less 文件如下：

>> lessc main.less main.css

自动合并媒体查询：

Clean-css 从 v3 开始支持@media 合并，less-plugin-clean-css 也是如此。所以运行在你的控制台中：

npm install -g less-plugin-clean-css

现在你可以编译你的 less 文件如下：

>> lessc --clean-css="advanced" main.less

less-plugin-clean-css 默认设置 --skip-advanced true 你应该为 @media merging

显式设置 advanced 选项

LESSCSS：如何使用最新版本编译和分组媒体查询

LESSCSS: how to compile using last version and grouping media queries

compilation

less