twitter-bootstrap 在不完全导入 LESS 文件的情况下引用类/mixin
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14453737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reference a class/mixin without completely importing the LESS file
提问by FLX
I'm using the roots theme for wordpress: https://github.com/retlehs/roots/
我正在为 wordpress 使用 root 主题：https: //github.com/retlehs/roots/
It already comes with a precompiled bootstrap.css and recommends to use app.css for any customizations. As I don't have the options to add the classes to the buttons via html or javascript, I'd like to use the LESS sources to reference a css class, for example, I want to give a submit button the bootstrap button style:
它已经带有预编译的 bootstrap.css 并建议使用 app.css 进行任何自定义。由于我没有通过 html 或 javascript 将类添加到按钮的选项，我想使用 LESS 源来引用 css 类，例如，我想为提交按钮提供引导按钮样式：
input#submit{
.btn;
.btn-primary;
}
If I use @import 'bootstrap.less';it adds the entire bootstrap css into app.css. How can I just use the bootstrap.less as reference for compiling?
如果我使用@import 'bootstrap.less';它将整个引导 css 添加到 app.css 中。如何仅使用 bootstrap.less 作为编译参考？
回答by ScottS
The core question you ask is
你问的核心问题是
"How can I just use the bootstrap.less as reference for compiling?"
“我如何只使用 bootstrap.less 作为编译参考？”
As of LESS version 1.5
从 LESS 1.5 版开始
For LESS 1.5 it is now possible to import a file purely as a reference. Like so:
对于 LESS 1.5，现在可以纯粹作为参考导入文件。像这样：
@import (reference) 'bootstrap.less';
No actual code will output from that file as CSS, but all becomes available to use as mixins.
没有实际代码会从该文件输出为 CSS，但所有代码都可以用作 mixin。
Original Answer (kept for context for all the comments)
原始答案（保留所有评论的上下文）
[DISCLAIMER: it is uncertain if this would work as of 1.3.3, but this original answer I do believe has some usefulness in later versions as well. However, for truly getting what the OP wanted, the new capability in LESS 1.5 is recommended.]
[免责声明：不确定这是否适用于 1.3.3，但我相信这个原始答案在以后的版本中也有一些用处。但是，为了真正获得 OP 想要的东西，建议使用 LESS 1.5 中的新功能。]
Current versions of LESS (1.3.3) can accommodate this through the use of a namespace. Like so:
LESS (1.3.3) 的当前版本可以通过使用命名空间来适应这一点。像这样：
#bootstrapRef() {
@import: 'bootstrap.less':
}
input#submit{
#bootstrapRef > .btn;
#bootstrapRef > .btn-primary;
}
By making the namespace a mixin (the addition of the parentheses after the name), it will still import the file (I know of no way to access it externally without importing), but it should not compile the actual bootstrap code into your final css file output. What this technique should do is allow you access to bootstrap's classes, mixins, etc., through the namespace call #bootstrapRef >, making it possible to use those in your own defined classes, etc.
通过使命名空间成为 mixin（在名称后添加括号），它仍然会导入文件（我知道没有导入就无法从外部访问它），但它不应该将实际的引导代码编译到最终的 css 中文件输出。这种技术应该做的是允许您通过命名空间调用访问引导程序的类、mixin 等#bootstrapRef >，从而可以在您自己定义的类等中使用它们。
I have not fully tested if there are any bugs to this, it should just work theoretically.
我还没有完全测试这是否有任何错误，它应该只是理论上有效。
回答by Declan Cook
Doing this in LESS is a bit tricky but can be achieved like so:
在 LESS 中这样做有点棘手，但可以像这样实现：
#bootstrap() {
.btn() {
@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";
@import "bootstrap/buttons.less";
}
}
input#submit{
#bootstrap > .btn;
}
resulting in some additional classes being declared from mixins.less and variables.less. Mostly just .clearfixand then all of the .btnclasses are added to input#submit
导致从 mixins.less 和 variables.less 声明了一些额外的类。大部分只是.clearfix然后所有的.btn类都被添加到input#submit
See the long output here:
在此处查看长输出：
回答by Tom Sarduy
I'm not sure if there is a tool for import only current referring css rules inside an external file, but Boostrap has a very organized structure, so check if the styles you are looking for are on mixins.less, so you don't have to import the entire bootstrap.lessfile.
我不确定是否有一个工具可以在外部文件中只导入当前引用的 css 规则，但是 Boostrap 有一个非常有组织的结构，所以检查你正在寻找的样式是否打开mixins.less，所以你不必导入整个bootstrap.less文件。
Also, check this related question, there are some good Best Practices for customize Boostrap.
另外，检查这个相关问题，有一些很好的自定义 Boostrap 的最佳实践。
EDIT:As @PavloMykhalov suggest, maybe is better to look at buttons.less
编辑：正如@PavloMykhalov 所建议的，也许最好看看buttons.less
Note:It will be awesome a tool for this sort of things. Some day I will work on that
注意：对于这类事情，这将是一个很棒的工具。总有一天我会为此而努力
回答by Ayyash
Don't know what made you believe that LESS currently supports that, for this to be possible the option must be a lot more explicit, it currently really simply imports, parses, saves chunks, executes chunks into output text.
不知道是什么让您相信 LESS 当前支持这一点，为此，该选项必须更加明确，它目前实际上只是导入、解析、保存块、将块执行到输出文本中。
Unless there is nothing explicit to stop this sequence, it will not do it any differently.
除非没有明确停止这个序列，否则它不会以任何不同的方式进行。
I have just logged a feature request under LESS, don't know for sure if this has been requested before though, searched and found nothing, hope I don't get slapped for repetition!
我刚刚在 LESS 下记录了一个功能请求，但不确定之前是否已经请求过，搜索并没有发现任何内容，希望我不要因为重复而被打耳光！
https://github.com/cloudhead/less.js/issues/1169
https://github.com/cloudhead/less.js/issues/1169
UPDATEThe issues turned out to be a duplicate, the issue open is here: https://github.com/cloudhead/less.js/issues/622
更新问题原来是重复的，打开的问题在这里：https: //github.com/cloudhead/less.js/issues/622
