引用类/ mixin，而不完全导入LESS文件 [英] Reference a class/mixin without completely importing the LESS file

问题描述

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

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

 输入＃submit {
 .btn; 
 .btn-primary; 
} 
  

如果我使用 @import'bootstrap.less' ; 它将整个引导css添加到app.css中。我如何使用bootstrap.less作为编译的参考？

解决方案

你问的核心问题是

我如何使用bootstrap.less作为编译参考？

从LESS版本1.5开始

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

  @import（reference）'bootstrap.less'; 
  

没有实际的代码将作为CSS从该文件输出，但是所有的代码都可以用作mixin。

原始答案（保留所有评论的上下文）

[DISCLAIMER：工作作为1.3.3，但这个原始答案我确实相信在一些有用的在以后的版本以及。 ）

当前版本的LESS（1.3.3）可以通过使用的命名空间。像这样：

  #bootstrapRef（）{
 @import：'bootstrap.less'：
} 
 
输入＃提交{
 #bootstrapRef> .btn; 
 #bootstrapRef> .btn-primary; 
} 
  

通过将命名空间设置为mixin（在名称后添加括号） ，它仍然会导入文件（我知道没有办法访问它外部，而不导入），但它不应该编译实际的引导代码到最终的CSS文件输出。这种技术应该允许你通过命名空间调用 #bootstrapRef> 来访问引导程序的类，mixins等，这样就可以使用你自己定义的类等。

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

I'm using the roots theme for wordpress: https://github.com/retlehs/roots/

It already comes with a precompiled bootstrap.css and recommends to use app.css for any customizations. As I don't have the options to add the classes to the buttons via html or javascript, I'd like to use the LESS sources to reference a css class, for example, I want to give a submit button the bootstrap button style:

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

If I use @import 'bootstrap.less'; it adds the entire bootstrap css into app.css. How can I just use the bootstrap.less as reference for compiling?

解决方案

The core question you ask is

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

As of LESS version 1.5

For LESS 1.5 it is now possible to import a file purely as a reference. Like so:

@import (reference) 'bootstrap.less';

No actual code will output from that file as CSS, but all becomes available to use as mixins.

Original Answer (kept for context for all the comments)

[DISCLAIMER: it is uncertain if this would work as of 1.3.3, but this original answer I do believe has some usefulness in later versions as well. However, for truly getting what the OP wanted, the new capability in LESS 1.5 is recommended.]

Current versions of LESS (1.3.3) can accommodate this through the use of a namespace. Like so:

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

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

By making the namespace a mixin (the addition of the parentheses after the name), it will still import the file (I know of no way to access it externally without importing), but it should not compile the actual bootstrap code into your final css file output. What this technique should do is allow you access to bootstrap's classes, mixins, etc., through the namespace call #bootstrapRef >, making it possible to use those in your own defined classes, etc.

I have not fully tested if there are any bugs to this, it should just work theoretically.

这篇关于引用类/ mixin，而不完全导入LESS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！