Link to the / mixin class without fully importing the LESS file

Question

I use the root theme for wordpress: https://github.com/retlehs/roots/

It already comes with precompiled bootstrap.css and recommends using app.css for any settings. Since I don’t have the ability to add classes to buttons via html or javascript, I would like to use LESS sources to refer to the css class, for example, I want to give the submit button the style of the boot button:

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

If I use @import 'bootstrap.less'; , it adds all bootstrap css to app.css. How can I just use bootstrap.less as a compilation link?

Answer 1

The main question you ask is

"How can I just use bootstrap.less as a compilation link?"

Starting from version LESS version 1.5

For LESS 1.5, you can now import the file solely as a link. For example:

 @import (reference) 'bootstrap.less'; 

No actual code will be output from this file as CSS, but everything becomes available for use as mixins.

Original response (kept for context for all comments)

[DISCLAIMER: It is unclear whether this will work with 1.3.3, but this original answer, which I really believe, has some usefulness in later versions. However, in order to really get what the OP required, a new feature in LESS 1.5 is recommended.]

Current versions of LESS (1.3.3) can match this with a namespace. For example:

 #bootstrapRef() { @import: 'bootstrap.less': } input#submit{ #bootstrapRef > .btn; #bootstrapRef > .btn-primary; } 

Having made the mixin namespace (adding brackets after the name), it will still import the file (I don’t know how to access it from the outside without importing it), but it should not compile the actual boot code into your final css file output. What this method should do is access to bootstrap classes, mixins, etc. By calling the #bootstrapRef > namespace, which allows you to use them in your own specific classes, etc.

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

Answer 2

Doing this in LESS is a bit complicated, but can be achieved like this:

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

as a result, some additional classes are declared from mixins.less and variables.less. Basically just .clearfix and then all .btn classes .btn added to input#submit

See the long output here:

http://pastebin.com/ZBAZZ3kS

Answer 3

I'm not sure if there is a tool to import only current CSS rules links 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 need to import the whole bootstrap.less file bootstrap.less .

Also check out this question , there are some good recommendations for setting up Boostrap.

EDIT: As PavloMikhalov believes, it might be better to look at buttons.less

Note: This will be a terrific tool for such things. Someday i will work on it

Answer 4

I don’t know what made you believe that LESS currently supports this, since it is possible, the option should be much more explicit, at present it really just imports, analyzes, saves pieces, executes pieces in the output text.

If there is nothing explicit to stop this sequence, it will not do otherwise.

I just registered a function request in the LESS section, I don’t know for sure if it was requested before, but I searched and found nothing, I hope that I will not be able to repeat the repeat!

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

UPDATE The problems were duplicate, the problem is open here: https://github.com/cloudhead/less.js/issues/622