引用的类/混入不完全导入LESS文件(Reference a class/mixin without

2019-07-18 12:54发布

我使用的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作为参考编制?

Answer 1:

你问的核心问题是

“我怎样才能只使用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 >使其能够使用那些在你自己定义的类,等等。

我如果有任何错误这一点,它应该只是工作在理论上还没有完全测试。



Answer 2:

在少花钱,这是一个有点棘手,但可以像这样实现:

#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规则的工具,但自举有一个非常有组织的结构,因此检查,如果你正在寻找的样式上mixins.less ,让你不要导入整个bootstrap.less文件。

此外,检查此相关的问题 ,也有一些很好的最佳实践定制的自举。

编辑:作为@PavloMykhalov建议,也许是更好看buttons.less

注意:这将是对这种东西真棒的工具。 有一天,我会在有效的



Answer 4:

不知道是什么让你相信,LESS目前支持的是,对于这是可能的选择一定要多多更加明确,但目前真的只是进口,解析,节省了大块,大块执行到输出文本。

除非有什么明确的停止这个序列,它不会做任何不同。

我刚才登录更低温度下在功能请求,不知道是否这已经请求之前,虽然,搜查,一无所获,希望我不要让她耳光的重复!

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

UPDATE竟然是一个重复的问题,开放式的问题就在这里: https://github.com/cloudhead/less.js/issues/622



文章来源: Reference a class/mixin without completely importing the LESS file