Bootstrap v4 - Overriding Mixins

Has any thought been put into overriding Bootstrap mixins?

I have a use case, where for example, I want to override the definition of a bootstrap mixin to provide additional styles, or modify existing styles slightly.

The problem with this is that SASS does not use the overridden mixin in certain cases, such as in an @include statement.

(More details here: https://github.com/sass/sass/issues/240)

For example, I’ve overriden the color-yiq mixin, and then the button-variant mixin. The button-variant mixin uses the correct (redefined) color-yiq mixin, because it was defined prior to the redefinition of the button-variant mixin.

However, the badge-variant mixin references the previously defined color-yiq mixin, because I have not overridden the badge-variant mixin.

The flow is something like:

• color-yiq defined by Bootstrap
• button-variant mixin defined by Bootstrap
• badge-variant mixin defined by Bootstrap
• color-yiq redefined by me
• button-variant redefined be me

The output looks like the following (pay attention to the text colour for the btn-warning and badge-warning):

It would seem that the only way around this that I can think of is to redefine every single mixin that uses the color-yiq mixin, which seems massively overkill.

I can’t be the only person in the world who would want to override a Bootstrap SASS mixin, surely?

Any ideas?

[richardthombs]

I’ve been trying to implement disabling of the :hover styles when the device doesn’t support hover and I wanted to override the mixins too. I ended up overriding all the :hover styling with the non-hovered versions, which sucks. +1 for having some kind of ability to override the mixins.

[francescozaia]

Indeed. It is quite opinionated to have this code in a mixin: @if ($yiq >= 150) { @return #111; } @else { @return #fff; } What about having these two colors available as variables maybe?