LESSCSS：如何编译使用最后版本和分组媒体查询 [英] LESSCSS: how to compile using last version and grouping media queries

问题描述

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

我有2个需要编译LESS到CSS：

1. 编译LESS不是自动的，但只有当我手动地这样做时， strong>（通常WinLess之类的工具没有最新版本）


2. 自动合并媒体查询（使用嵌套规则中的媒体查询，导致大量重复相同的媒体查询。 编译器应该在唯一的媒体查询中检测它并将所有css声明分组）

如何做？ （可能没有node.js，我没有它）

解决方案

少运行在3个环境：节点，浏览器和内部犀牛。目前没有Rhino支持v2，或者您可以使用 https://github.com/SomMeri/less4j，请参阅如何构建Rhino特定版本

有些PHP端口可在 http://lessphp.gpeasy.com/ 和 http://leafo.net/lessphp 。这两个端口似乎都不能运行最新版本的Less。此外，@media合并对PHP无效，请参阅：将多个媒体查询组合为LESS css的输出

我写了可能没有node.js：D反正..我读了关于
可能性使用Grunt而不是做同样的任务。请问，什么是
两种方法的区别？感谢

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

Grunt和Grunt插件通过npm，Node.js
软件包管理器安装和管理。 Grunt 0.4.x需要稳定的Node.js版本> =
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 
  

自动合并媒体查询 / p>

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

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

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

 > lessc --clean-css =advancedmain.less 
  

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

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:

1. 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)
2. 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)

解决方案

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:

1. Install Node.js (which includes npm), see https://nodejs.org/download/
2. Then you in your console (command prompt) npm install -g less. Mac users should run the Terminal.app and Windows users can use the cmd command.

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:

1. 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

这篇关于LESSCSS：如何编译使用最后版本和分组媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！