Reference a class/mixin without completely importi

Question

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 1

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.

Answer 2

Doing this in LESS is a bit tricky but can be achieved like so:

#bootstrap() {
    .btn() {
        @import "bootstrap/variables.less";
        @import "bootstrap/mixins.less";
        @import "bootstrap/buttons.less";
    }
}

input#submit{
  #bootstrap > .btn;
}

resulting in some additional classes being declared from mixins.less and variables.less. Mostly just .clearfix and then all of the .btn classes are added to input#submit

See the long output here:

http://pastebin.com/ZBAZZ3kS

Answer 3

I'm not sure if there is a tool for import only current referring css rules inside an external file, but Boostrap has a very organized structure, so check if the styles you are looking for are on mixins.less, so you don't have to import the entire bootstrap.less file.

Also, check this related question, there are some good Best Practices for customize Boostrap.

EDIT: As @PavloMykhalov suggest, maybe is better to look at buttons.less

Note: It will be awesome a tool for this sort of things. Some day I will work on that

Answer 4

Don't know what made you believe that LESS currently supports that, for this to be possible the option must be a lot more explicit, it currently really simply imports, parses, saves chunks, executes chunks into output text.

Unless there is nothing explicit to stop this sequence, it will not do it any differently.

I have just logged a feature request under LESS, don't know for sure if this has been requested before though, searched and found nothing, hope I don't get slapped for repetition!

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

UPDATE The issues turned out to be a duplicate, the issue open is here: https://github.com/cloudhead/less.js/issues/622