为什么LESS为ol.start > li
和ol.start > li:before
分别输出两个规则集?如何最小化/合并LESS编译的规则集数量?
LESS:
.myMixin(){
list-style-type: none !important;
> li {
padding: .5em 0em;
&:before {
list-style-position: outside;
}
}
}
ol.start {
.myMixin();
// list-style-type: none !important;
counter-reset: sAd 0;
> li {
//padding: .5em 0em;
counter-increment: sAd;
&:before {
content: counter(sAd, upper-alpha) ". ";
}
}
}
编译CSS:
ol.start {
list-style-type: none !important;
counter-reset: sAd 0;
}
ol.start > li {
padding: .5em 0em;
}
ol.start > li:before {
list-style-position: outside;
}
ol.start > li {
counter-increment: sAd;
}
ol.start > li:before {
content: counter(sAd, upper-alpha) ". ";
}
答案 0 :(得分:0)
上面的评论解释了为什么默认情况下Less并不合并,所以要回答问题的第二部分:
我如何最小化/巩固?
您可以使用以下Less选项:--clean-css --clean-option=--advanced
,但遗憾的是此选项似乎对当前(1.7.4)Less版本没有影响,因为某些错误(内部Less --clean-css
选项似乎与包含的clean-css
版本不同步。因此,我建议您直接使用clean-css
(工具本身或相应的插件用于"自动构建环境"例如grunt
或gulp
如果您使用任何)。
(实际上,我个人总是使用单独的clean-css
构建步骤而不是less
内置选项,因为它更容易控制和更新。
<强> - 强>
advanced
(off
默认为lessc
,on
本身默认为clean-css
,可以合并相同的选择器(以及其他一些选项) &#34;高级&#34;优化 - 有关更多详细信息,请参阅相应的文档。
其实我上面误会了你,抱歉。事实上,Less --clean-option=--advanced
选项中没有任何错误。它可以正常工作,但在较新的clean-css
版本(包括那些安装了Less 1.7.x的版本)中,他们只是禁用了相同选择器的合并如果那么其他任何选择器(我正在比较之前的clean-css
版本,这些版本在v2.1.8中更改内容之前有效。所以暂时看起来clean-css
工具还不会合并原始代码段中的选择器 - 除非我错过了一些选项(可能还有一些其他的CSS-minifier工具更具侵略性& #34;不安全&#34;合并选项会有所帮助。)
总结以上所有内容:
--clean-css --clean-option=--advanced
较少的选项会将选择器合并到:
foo {bar: baz}
foo {baz: bar}
但赢了:
foo {bar: baz}
baz {bar: foo}
foo {baz: bar}