在不完全导入 LESS 文件的情况下引用类/mixin答案

【问题标题】：Reference a class/mixin without completely importing the LESS file在不完全导入 LESS 文件的情况下引用类/mixin
【发布时间】：2013-01-05 09:34:27
【问题描述】：

我正在使用 wordpress 的根主题：https://github.com/retlehs/roots/

它已经带有预编译的 bootstrap.css，建议使用 app.css 进行任何自定义。由于我没有通过 html 或 javascript 将类添加到按钮的选项，我想使用 LESS 源来引用 css 类，例如，我想为提交按钮提供引导按钮样式：

input#submit{
.btn;
.btn-primary;
}

如果我使用@import 'bootstrap.less';，它会将整个引导 css 添加到 app.css 中。我怎样才能只使用 bootstrap.less 作为编译的参考？

【问题讨论】：

那么，您只想引用您在 app.css 上使用的类吗？
我认为不可能。请阅读：stackoverflow.com/a/4060413/1761123
为什么不直接将 bootstrap.css 本身的导入规则添加到新创建的 css 中？
@user1761123：您直接回答的问题仅适用于纯 CSS。使用 LESS，您可以像 FLX 一样将现有的类代码混合到另一个选择器中。问题不在于该功能，而在于不想将所有 bootstrap.less 代码导入使用 input#submit 代码的最终样式表。
那么，为什么不删除其他不需要的导入并保留 mixins 和函数呢？如果您打算再次使用同一个类，那么请期望您需要它，在输出中复制它是 LESS 背后的全部想法

标签： css twitter-bootstrap less

【解决方案1】：

你问的核心问题是

“我怎样才能只使用 bootstrap.less 作为编译参考？”

自 LESS 1.5 版起

对于 LESS 1.5，现在可以导入文件纯粹作为参考。像这样：

@import (reference) 'bootstrap.less';

该文件不会以 CSS 形式输出任何实际代码，但所有代码都可用作 mixins。

原始答案（为所有 cmets 保留上下文）

[免责声明：不确定这是否适用于 1.3.3，但我相信这个原始答案在以后的版本中也有一些用处。但是，为了真正得到 OP 想要的东西，建议使用 LESS 1.5 中的新功能。]

当前版本的 LESS (1.3.3) 可以通过使用命名空间来适应这一点。像这样：

#bootstrapRef() {
  @import: 'bootstrap.less':
}

input#submit{
  #bootstrapRef > .btn;
  #bootstrapRef > .btn-primary;
}

通过将命名空间设置为 mixin（在名称后添加括号），它仍然会导入文件（我知道不导入就无法从外部访问它），但 它不应该编译实际引导代码到您的最终 css 文件输出中。这种技术应该做的是允许您通过命名空间调用#bootstrapRef > 访问引导程序的类、mixin 等，从而可以在您自己定义的类等中使用它们。

我还没有完全测试这是否有任何错误，它应该只是理论上可以工作。

【讨论】：

这似乎是一个很好的解决方案，但我在使用最新版本的 lessc 时遇到错误：lessc app.less > ../app.css NameError: #bootstrapRef > .btn is undefined in / assets/css/less/app.less:170:2 169 input#submit{ 170 #bootstrapRef > .btn; 171 #bootstrapRef > .btn-primary; 2 @import: 'bootstrap.less': 3 }
很遗憾，我无法对其进行测试。以下是您需要查看的三件事：1）我使用this online compiler 来确保#bootstrapRef 会被识别；所以这可能是编译器的差异，但只需将您自己的类放入并查看您是否可以访问它即可检查该功能； 2) 看起来 bootstrap.less 文件可能未加载，3) 如果 #2 正常，请仔细检查 .btn 类是否嵌套更深，这将需要更长的命名空间调用（如 #bootstrapRef > #someWrapperInBootStrap > .btn）。
不幸的是，这些建议都不能解决问题。我为自己设置了一个简单的导入测试，但所有导入场景都不起作用。在此处查看结果：pastebin.com/VnLJcQ77
只是为了确认，您显示import 命令而不是@import（您没有在您的粘贴箱中显示@ 登录）。如果那是您运行的实际代码，那么这可能是您的问题。你能验证一下吗？
@FLX：除了上面关于检查@ 符号的注释之外，您的SCENARIO 2: IMPORT FROM FILE WITH EXTERNAL BUNDLE（第二个场景2）应该已经工作了。我不确定@import 是否可以嵌套在目标文件的命名空间块中，正如我上面显示的那样。当然，缺少@ 会影响两者。

【解决方案2】：

在 LESS 中执行此操作有点棘手，但可以这样实现：

#bootstrap() {
    .btn() {
        @import "bootstrap/variables.less";
        @import "bootstrap/mixins.less";
        @import "bootstrap/buttons.less";
    }
}

input#submit{
  #bootstrap > .btn;
}

导致从 mixins.less 和 variables.less 声明了一些额外的类。大多数情况下只是.clearfix，然后将所有.btn 类添加到input#submit

在此处查看长输出：

http://pastebin.com/ZBAZZ3kS

【讨论】：

所以你没有问题让variables.less等导入到#bootstrap() {} .btn(){}的双重嵌套mixin中？这太有趣了。我确信输出不是 OP 想要的（他不希望引导程序的类嵌套在 input#submit 下，而是采用特定类的特征），但事实上你确实让 @import 工作在 mixin 中对我来说很重要。你用的是什么编译器？
lessc 1.3.3，这是我认为你能做的最好的。它导致所有buttons.less 类都被添加到input#submit。
问题是 OP 不希望将类添加到 input#submit，他希望将这些类中的属性混合到选择器中本身。
如果您从代码中删除 .btn() mixin 包装器，并将三个文件导入到 #bootstrap() mixin 中，然后调用 #bootstrap > .btn 它是否会混合 .btn 类中的属性进入input#submit?
没有这会导致btn is undefined。我不认为 less 处理导入并将类暴露给 mixin/namespace。我无法使用导入以这种方式工作。如果未导入类，此方法将起作用。

【解决方案3】：

不知道是什么让你相信 LESS 当前支持这一点，为了使这一点成为可能，选项必须更加明确，它目前实际上只是导入、解析、保存块、将块执行到输出文本中。

除非没有明确的停止这个序列，它不会做任何不同的事情。

我刚刚在LESS下记录了一个功能请求，但不确定之前是否有人请求过，搜索并没有发现任何东西，希望我不会因为重复而被打脸！

https://github.com/cloudhead/less.js/issues/1169

更新问题原来是重复的，打开的问题在这里：https://github.com/cloudhead/less.js/issues/622

【讨论】：

我不确定我是否完全理解您关于“停止此序列”的说法。 This issue 解决了在选择器中导入的问题，并且当前对 this compiler 的测试显示命名空间可以是一个 mixin（例如 #test() { .mixin {color: red;}} .class {#test > .mixin;} 按预期工作）。但我还没有确认这两者可以一起工作，主要是因为我无法确认是否允许导入到 mixin 中（尽管很明显，我怀疑不是）。
我想第一次大家都误解了这个问题，其实不是mixins里面的规则怎么写，而是怎么在输出的css中按照你想要的输出样式，而不是什么你的css导入......所以，问题是：我可以导入只是为了使用定义吗？没有完整的样式输出？ mixins 中的导入不会将样式排除在输出之外，对吗？
是的，我的解决方案（如果 import 进入 mixin 可以工作）会阻止样式输出，直到您通过命名空间调用从 mixin 中专门调用 mixin 或其他内容。所以 mixin 在 LESS 中，但不会出现在 CSS 中。我的解决方案的问题是它似乎实际上不起作用（import 似乎没有在 mixin 中得到确认），但没有人在他们的测试中确认任何内容。

【解决方案4】：

我不确定是否有一个工具可以在外部文件中只导入当前引用的 css 规则，但是 Boostrap 的结构非常有条理，所以请检查您要查找的样式是否在 mixins.less 上，所以您不必导入整个bootstrap.less 文件。

另外，请查看related question，有一些自定义 Boostrap 的良好最佳实践。

编辑：正如@PavloMykhalov 所建议的，也许看看buttons.less

注意：对于这类事情来说，这将是一个很棒的工具。总有一天我会努力的

【讨论】：

在这种情况下只导入buttons.less是有意义的。