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

Question

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

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

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

如果我使用@import 'bootstrap.less';它将整个bootstrap 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中文件输出.这项技术应该做的是允许您通过命名空间调用访问bootstrap的类,mixins等#bootstrapRef >,从而可以在您自己定义的类中使用它们等.

我还没有完全测试是否有任何错误,它应该在理论上工作.

Answer 2

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

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

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

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