LESSCSS：如何使用上一版本进行编译并对媒体查询进行分组

Question

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

我有2个需要在LESS中编译LESS：

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

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

Answer 1

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

http://lessphp.gpeasy.com/和http://leafo.net/lessphp提供了一些PHP端口。两个端口似乎都无法运行最新版本的Less。 @media合并也不适用于PHP，请参阅：Group multiple media queries formed as output of LESS css

  

我写了“可能没有node.js”：D无论如何....我读到了   使用Grunt代替执行相同任务的可能性。请问，是什么   两种方法的区别？感谢

Grunt（和Gulp）都是JavaScript任务运行者，也需要Node.js：

  

通过npm，Node.js安装和管理Grunt和Grunt插件   包经理。 Grunt 0.4.x需要稳定的Node.js版本＆gt; =   0.8.0。

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

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

现在您可以按如下方式编译较少的文件：

>> lessc main.less main.css

自动合并媒体查询：

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

1. npm install -g less-plugin-clean-css

现在您可以按如下方式编译较少的文件：

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

less-plugin-clean-css设置--skip-advanced为默认情况下你应该为@media合并显式设置advanced选项