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

Question

我真的很喜欢LESS的想法和概念。然而，我偶然发现了一个错误，我在很久以前向作者报告了该错误，但尚未得到任何反馈。也许只是我做错了什么。

我的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 行 100% 冗余的 CSS 代码。

我能想出的唯一解决方案是不要拆分我的文件，这是我真正想避免的。

score 12 · Accepted Answer

虽然不理想，但实际原因是你导入的文件理论上不需要包含任何 CSS。通常，您会有变量和动态 mixin，它们对您的 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在这种情况下不会输出。

score 3 · Accepted Answer

3

LESS 现在支持@import-once "stylename.less";

于 2012-10-30T11:57:03.590 回答

score 0 · Accepted Answer

也许您可以在开发环境中将它们拆分，然后在部署到实时 Web 服务器时将它们合并在一起，而不需要所有额外的代码？

score 0 · Accepted Answer

如果使用$而不是..

在 config.less 中：

$mixin
{
  a { color: @light; }
  h2 { //etc.
}

在 header.less 中：

@import "config";
.header
{
  $mixin;
}

来源。我也试过这个并且它有效。

4 回答 4