49

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

4

4 回答 4

54

你问的核心问题是

“我怎样才能只使用 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文件输出。这种技术应该做的是允许您通过命名空间调用访问引导程序的类、mixin 等，#bootstrapRef >从而可以在您自己定义的类等中使用这些类。

如果有任何错误，我还没有完全测试，它应该只是理论上的工作。

于 2013-01-22T16:39:38.097 回答
4

在 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

于 2013-02-11T23:29:06.127 回答
3

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

另外，检查这个相关问题，有一些很好的自定义 Boostrap 的最佳实践。

编辑：正如@PavloMykhalov 建议的那样，也许更好看buttons.less

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

于 2013-01-22T08:20:49.327 回答
1

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

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

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

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

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

于 2013-02-08T15:54:09.263 回答