Question

我正在使用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作为编译参考？

Answer 1

你问的核心问题是

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

自LESS版本1.5

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

@import (reference) 'bootstrap.less';

没有实际代码从CSS输出该文件，但所有代码都可以用作mixins。

原始答案（保留所有评论的背景）

[免责声明：不确定这是否会起到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 >访问bootstrap的类，mixins等，从而可以在您自己定义的类中使用它们等。

我还没有完全测试过是否有任何错误，它应该在理论上起作用。

Answer 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

Answer 3

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

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

编辑：正如@PavloMykhalov建议的那样，或许最好看一下buttons.less

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

Answer 4

不知道是什么让你相信LESS目前支持这一点，为此可能选项必须更明确，它目前只是导入，解析，保存块，执行块到输出文本。

除非没有任何明确的措施来阻止这个序列，否则它不会做任何不同的事情。

我刚刚在LESS下记录了一个功能请求，不知道之前是否已经请求了这个请求，但是没有找到，希望我不会因为重复而被打耳光！

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

<强>更新问题结果是重复的，问题是：} https://github.com/cloudhead/less.js/issues/622

引用类/ mixin而不完全导入LESS文件

4 个答案:

自LESS版本1.5

原始答案（保留所有评论的背景）