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

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

My

application.less

-类似以下内容的文件：

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

我喜欢使用

@import

规则分割文件，以便更好地了解css声明。然而，每个导入的文件都需要再次重新导入config.less文件，以便能够使用我在其中定义的mixin和变量

我敢打赌，您已经知道我所使用的冗余类型：每次导入config.less时，它的“输出”都会成为application.css的一部分。

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

---

我能想出的唯一解决办法是不分割我的文件，这是我真正想要避免的

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

虽然这并不理想，但实际原因是您导入的文件理论上不需要包含任何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; }

---

在这种情况下，

#颜色{}和.button

将不会输出。

如果使用

$

而不是

声明和混合动态混合，则可以在较少的配置文件中使用动态混合

在config.less中：

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

在header.less中：

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

---

。我也尝试过这个方法，效果很好。

LESS现在支持

@import-once“stylename.LESS”
但问题是如何自动合并它们。您是否考虑过实现类似@load/@require的功能来导入文件而不输出。那太好了。但我会尝试根据您的提示调整我的代码。我刚刚注意到您不能在动态混合中使用嵌套。很不幸，这对我来说真的不起作用。是的，说实话，这些都是我最终想要的东西，但我还没有找到时间来实现。这肯定是一个很棒的功能！我们使用的是来自Twitter的Bootstrap，如果能够重用和扩展Bootstrap已经定义的类，而不输出所有的Bootstrap声明，将会有很大的帮助。