css – 引用一个类/ mixin,而不完全导入LESS文件

前端之家收集整理的这篇文章主要介绍了css – 引用一个类/ mixin,而不完全导入LESS文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用的根主题wordpresshttps://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作为编译的参考?

解决方法

你问的核心问题是

“How can I just use the bootstrap.less as reference for compiling?”

从LESS版本1.5

对于LESS 1.5,现在可以将文件导入为纯引用。像这样:

@import (reference) 'bootstrap.less';

没有实际的代码将作为CSS从该文件输出,但所有可用作混合。

原始答案(保留所有评论的上下文)

[免责声明:不确定这是否将工作作为1.3.3,但这个原始答案我相信在以后的版本中也有一些有用的。然而,为了真正获得OP想要的东西,建议使用LESS 1.5中的新功能

当前版本的LESS(1.3.3)可以通过使用命名空间来满足这一要求。像这样:

#bootstrapRef() {
  @import: 'bootstrap.less':
}

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

通过使命名空间为一个mixin(在名称添加括号),它仍然导入文件(我知道没有办法访问它外部,而不导入),但它不应该编译实际的bootstrap代码到你的最终css文件输出。这个技术应该做什么是允许你访问引导的类,mixins等,通过命名空间调用#bootstrapRef&gt,使它可以使用你自己定义的类等。

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

原文链接:https://www.f2er.com/css/222385.html

猜你在找的CSS相关文章