css mixins using an external framework

Question

How can you use css mixins based on an existing library? Example: Consider you want to create a new css class based on the bootstrap btn btn-success classes. It might look like:

.disabled-button {
  @mixin .btn;
  @mixin .btn-success;
  @mixin .disabled;
  color:red;
}

Less/Sass are capable of doing such kind of things when you define the classes btn or btn-success yourself, but how do you deal with it when it comes from bootstrap (or another css framework) ?

Well, in short, in general there's no difference between your classes and those defined in a framework. But the devil is in details: for example Bootstrap `.btn` is not really defined as a single distinct ruleset but it's actually a set of several styles applied to several (a lot!) selectors spread all over the sources. So when you try to use those as a mixin you most likely don't get a result you'd expect. For more details see this collection of remarks: — seven-phases-max, Sep 06 '14 at 03:35
[1](http://stackoverflow.com/questions/23840711/bootstrap-3-with-less-how-to-handle-bootstraps-nested-rules#comment36791109_23840711), [2](http://stackoverflow.com/questions/22983475/a-smarter-way-for-integrating-bootstrapor-even-from-another-less-css-file-clas#comment35124805_22983475), [3](http://stackoverflow.com/questions/24113419/extending-bootstrap-3-less-btn-group-not-working/24125264#comment37200018_24113419), [4](http://stackoverflow.com/a/24240819/2712740) — seven-phases-max, Sep 06 '14 at 03:36
The problem is what, exactly? Have you tried this? Was there an error? — cimmanon, Sep 06 '14 at 18:34
I was looking for a way to encapsulate a framework like bootstrap behind my custom classes. E.g. I might want to use my class `disabled-button` another day with a different framework (purecss), so my idea was that I could just use my classes and use mixins to solve this. If that's not possible then it means that the html must be coupled to the css framework at hand. It was more an architectural question about css. — shaft, Sep 07 '14 at 20:32

score 1 · Accepted Answer · edited May 23 '17 at 12:32

If you can add LESS compilation into your workflow, you can achieve this easily with its @import (reference) and :extend(x all). Without needing to learn anything more about LESS, you'd do

@import (reference) "bootstrap.less"; // this file is included with bootstrap. `(reference)` means it will only pull in the styles you ask it for, so you could continue using this even if you switch to another framework and don't want to include all of bootstrap
.disabled-button:extend(.button all, .button-success all, .disabled all) {} // pulls in the `.button` styles, `.button-success` styles, and `.disabled` styles
.disabled-button {color:red} // adds on your styles

Explanation of LESS's :extend(all) and relevant documentation links are in this answer

Since CSS is valid LESS, you wouldn't have to make any other changes to your stylesheet. Okay, so how do you add LESS compilation to your workflow? The simplest solution is described in LESS's "Command Line Useage" documentation, which boils down to installing less (once)

$ npm install less -g

and then running lessc, the less compiler

$ lessc my-styles.less my-compiled-styles.css

css mixins using an external framework

1 Answers1