使用LESS及其@import时的CSS-Redundancy

Question

我非常喜欢LESS的想法和概念.然而我偶然发现了一个错误,我很久以前就向作者报告了这个错误,但还没有得到任何反馈.也许只是我做错了什么.

My application.less-File看起来与此类似:

@import "reset";
@import "config";
@import "header";
@import "forms";
[…]

我喜欢可以使用@import规则来分割我的文件以更好地概述我的css声明.然而,每个导入的文件都需要再次重新导入config.less-File ,以便能够使用我在其中定义的mixins和变量.

我打赌你已经知道我正在推动什么样的冗余:每次导入config.less时,它的"输出"都成为application.css的一部分.

我的配置文件包含大约200行代码.由于我将CSS分成大约5个文件(基于我的控制器名称),需要重新导入配置,我最终得到大约1000行生成的CSS代码,这些代码是100%冗余的.

我能想出的唯一解决方案就是不要分割我的文件,我真的想避免这些.

Answer 1

虽然不理想,但实际的原因是您理论上导入的文件不需要包含任何CSS.通常,您将拥有变量和动态混合,这对您的CSS输出没有贡献:

lib.less:

#colors {
    @blue: #0011ff;
    @red: #ee2222;
}
.button (@width: 10px) {...}

main.less:

@import "lib";

a { color: #colors[@blue]; }

输出,main.css:

a { color: #0011ff; }

#colors {} and .button 在这种情况下不会输出.