我使用的WordPress主题根: https://github.com/retlehs/roots/
它已经配备了预编译bootstrap.css,并建议使用app.css任何自定义。 由于我没有通过HTML或JavaScript添加类按钮的选项,我想用更少的源引用一个CSS类,例如,我想给一个提交按钮引导按钮样式:
input#submit{
.btn;
.btn-primary;
}
如果我使用@import 'bootstrap.less';
它增加了整个引导CSS到app.css。 我怎么能只使用bootstrap.less作为参考编制?
你问的核心问题是
“我怎样才能只使用bootstrap.less作为参考编制?”
由于少1.5版
对于不太1.5现在可以单纯导入文件作为参考。 像这样:
@import (reference) 'bootstrap.less';
没有从该文件中的CSS代码将输出实际,但一切都变得可以作为混入使用。
原来的答案(保持上下文所有评论)
[免责声明:它是不确定这是否会为1.3.3工作,但这种原始的答案我相信在以后的版本有些用处也。 然而,对于真正得到什么的OP想要的,建议在不到1.5的新功能。]
LESS(1.3.3)的当前版本可以通过使用一个命名空间的容纳这一点。 像这样:
#bootstrapRef() {
@import: 'bootstrap.less':
}
input#submit{
#bootstrapRef > .btn;
#bootstrapRef > .btn-primary;
}
通过将命名一个mixin(加括号的名称后),它仍然会导入该文件(据我所知,没有办法访问外部无进口),但它不应该编译实际的引导代码到你最终的CSS文件输出 。 这是什么技术应该做的是让你获得引导的班,混入等,通过命名空间调用#bootstrapRef >
使其能够使用那些在你自己定义的类,等等。
我如果有任何错误这一点,它应该只是工作在理论上还没有完全测试。
在少花钱,这是一个有点棘手,但可以像这样实现:
#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
我不知道是否有进口目前唯一的参照外部文件中的CSS规则的工具,但自举有一个非常有组织的结构,因此检查,如果你正在寻找的样式上mixins.less
,让你不要导入整个bootstrap.less
文件。
此外,检查此相关的问题 ,也有一些很好的最佳实践定制的自举。
编辑:作为@PavloMykhalov建议,也许是更好看buttons.less
注意:这将是对这种东西真棒的工具。 有一天,我会在有效的
不知道是什么让你相信,LESS目前支持的是,对于这是可能的选择一定要多多更加明确,但目前真的只是进口,解析,节省了大块,大块执行到输出文本。
除非有什么明确的停止这个序列,它不会做任何不同。
我刚才登录更低温度下在功能请求,不知道是否这已经请求之前,虽然,搜查,一无所获,希望我不要让她耳光的重复!
https://github.com/cloudhead/less.js/issues/1169
UPDATE竟然是一个重复的问题,开放式的问题就在这里: https://github.com/cloudhead/less.js/issues/622