使用LESS及其@import时的CSS冗余

前端之家收集整理的这篇文章主要介绍了使用LESS及其@import时的CSS冗余前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我真的很喜欢这个想法和 LESS的概念。但是我偶然发现了一个错误,我刚才向作者报告了一个错误,但还没有得到任何反馈。也许只是我做错了事情。

我的application.less – 与以下类似的文件

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

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

我敢打赌你已经知道我正在驾驶什么样的冗余:每当import.config被导入时,它的“输出”就成为application.css的一部分。

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

只有我可以想出的解决方案是不要分割我的文件,我真的很想避免。

解决方法

虽然不理想,但实际的原因是理论上导入的文件不需要包含任何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 {}和.button将不会被输出

猜你在找的CSS相关文章