使用LESS及其@import时的CSS冗余 [英] CSS-Redundancy when using LESS and its @import

问题描述

我真的很喜欢 LESS 的想法和概念。然而，我偶然发现了一个错误，我在前一段时间向作者报道，但还没有得到任何反馈。也许只是我做错了什么。

I really like the idea and the concept of LESS. Yet I stumbled upon a bug, which i reported quite a while ago to the author but did not yet get any feedback. Maybe it's just me who is doing something wrong.

我的 application.less - 看起来与此类似的文件：

My application.less-File that looks similar to this:

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

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

I like that it is possible to use the @import rule to split up my files to gain a better overview of my css-declarations. Yet every imported file needs to re-import the config.less-File again to be able to make use of the mixins and variables i defined in there.

我猜你已经知道我在开车什么样的冗余：每当config.less被导入，它的输出成为application.css的一部分。

I bet you already know about what kind of redundancy I am driving at: Everytime the config.less is imported, its "output" becomes part of the application.css.

我的配置文件包含大约200行代码。因为我把我的CSS分成大约5个文件（基于我的控制器名称），需要重新导入配置，我最终有大约1000行生成的CSS代码是100％冗余。

My config-file contains about 200 lines of code. Since I split up my CSS-into about 5 files (based on my controller names) that need to re-import the config, I end up having about 1000 lines of generated CSS-Code that are 100% redundant.

只有我能想出的解决方案不是分割我的文件，我真的很想避免。

Only solution that I can come up with is not to split up my files, what I really like to avoid.

推荐答案

虽然不理想，但实际的原因是，你理论上导入的文件不需要包含任何CSS。通常，您将有变量和动态混合，它们不会影响您的CSS输出：

Although not ideal, the practical reason for this is that the files you import theoretically don't need to contain any CSS. Typically, you would have variables and dynamic mixins, which don't contribute to your CSS output:

lib.less：

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

main.less：

main.less:

@import "lib";

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

输出，main.css：

output, main.css:

a { color: #0011ff; }

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

#colors {} and .button will not be output in this case.

这篇关于使用LESS及其@import时的CSS冗余的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！