使用LESS合并规则集

时间:2014-08-28 13:41:34

标签: css less

为什么LESS为ol.start > liol.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) ". ";
}

1 个答案:

答案 0 :(得分:0)

上面的评论解释了为什么默认情况下Less并不合并,所以要回答问题的第二部分:

  

我如何最小化/巩固?

您可以使用以下Less选项:--clean-css --clean-option=--advanced,但遗憾的是此选项似乎对当前(1.7.4)Less版本没有影响,因为某些错误(内部Less --clean-css选项似乎与包含的clean-css版本不同步。因此,我建议您直接使用clean-css(工具本身或相应的插件用于"自动构建环境"例如gruntgulp如果您使用任何)。

(实际上,我个人总是使用单独的clean-css构建步骤而不是less内置选项,因为它更容易控制和更新。

<强> -

advancedoff默认为lesscon本身默认为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}