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

【问题标题】：CSS-Redundancy when using LESS and its @import使用 LESS 及其 @import 时的 CSS 冗余
【发布时间】：2014-01-07 23:43:50
【问题描述】：

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

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

【问题讨论】：

标签： css less

【解决方案1】：

虽然不理想，但实际原因是你导入的文件理论上不需要包含任何 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 在这种情况下不会输出。

【讨论】：

你有没有想过实现类似@load/@require 的东西来导入一个没有输出的文件。那会很好。但我会尝试根据您的提示调整我的代码。
我刚刚注意到你不能在动态混合中使用嵌套。所以不幸的是，这对我来说真的不起作用。
是的，老实说，这些都是我希望最终拥有的东西，但还没有找到实施的时间。
这肯定是一个很棒的功能！我们正在使用来自 Twitter 的 Bootstrap，重用和扩展 Bootstrap 已经定义的类会很有帮助，而无需输出所有的引导声明。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

在 config.less 中：

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

在 header.less 中：

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

Source。我也试过了，效果很好。

【讨论】：