profile
viewpoint

Ask questionsBootstrap 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):

image

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?

twbs/bootstrap

Answer questions vagu71

I have been trying to override the button-variant mixin. The issue is that when the mixin is redefined using the same name in the custom.scss file, and then the following code is added below the overridden mixin: @each $color, $value in $theme-colors { .btn-#{$color} { @include button-variant($value, $value); } }

...there is duplication of the compiled button css.

This happens when the custom mixin code and the code above is added in custom.scss file after importing bootstrap. Whereas, when this code is added above the import, the default code overwrites the overridden code. And no change is noticed.

useful!
source:https://uonfu.com/
Github User Rank List