Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
472 views
in Technique[技术] by (71.8m points)

css - Reference a class/mixin without completely importing the LESS file

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...