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?
Answer
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.