Search code examples
twitter-bootstrapmeteorlessextend

Is it possible to inherit from a Bootstrap class in LESS, using Meteor?

I'm building some custom classes in my Meteor app, using LESS. (Bootstrap is added to Meteor via the twbs:bootstrap Meteor package, rather than using @import in LESS).

For example, I have a class called .btn-pill, which I want to inherit from Bootstrap's .btn-xs, like this:

HTML

<button class="btn btn-pill"></button>

LESS

.btn-pill {
    &:extend(.btn-xs);
    color: @text-color;
    background-color: @white;
    border: 1px solid @gray-main;
    &:hover {
        background-color: @gray-light;
    }
}

Unfortunately, this doesn't seem to work... Of course, I could always just use both classes in the <button> tag:

<button class="btn btn-xs btn-pill"></button>

but I would rather avoid that if possible.

Is it even possible to use &:extend like this across different files (like I understand it does with @extendin SASS - like in this SO question)? Or doesn't it work because Bootstrap is implemented via a Meteor package?

Solution

  • As of Meteor v1.2, less files are much more manageable.

    Download official bootstrap less distribution, place them in a folder named imports. Doing this allows you to import files instead of seeing the compiled automatically.

    Place the bootstrap.less file in a higher level folder outside the imports folder and fix the import folder paths according to your own structure.

    Now you can use the variables to your liking. Do whatever with them that less normally allows you to do.

    Or if you are stuck with Meteor's earlier versions, you can use nemo64:bootstrap to customize and use imports from bootstrap.