Question

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

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

@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将不会输出。

Answer 2

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

Answer 3

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

Answer 4

如果使用$而不是.声明和混入，则可以在LESS配置文件中使用动态mixins。

在config.less：

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

在header.less：

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

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