Bootstrap v4 - Overriding Mixins

[DaleMckeown]

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: sass/sass#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?

[adampatterson]

I agree, Personally, I don't see why Bootstrap is making my button colour decisions for me.

I have a blue button. Maybe a medium level of blue that I want to have white text.

After updating to the beta, my button text was made #111. When my button is on a dark background I don't feel like the text should be dark. In fact, that's not the point. I should be able to make it green, or red.

My site is minimal so that was the only thing that I ran into issues with.

[DaleMckeown]

Just to be clear, the issue here isn't unique to the color-yiq mixin, or button text colours - It was just the first example that I ran into serious issues.

Even if color-yiq is changed/removed/whatever, we still need a way to override any of the Bootstrap mixins with our own definitions and have them be used throughout SASS compilation in perpituity.

[wojtask9]

There is a way to fix your issues but you must modify bootstrap.scss
In our project we modified bootstrap.scss and after @import "mixins" we added @import "mixins_override";

and if we want for example override something we put in _mixins_override.scss

part of our bootstrap.scss

@import "mixins";
@import "mixins_override";
@import "print"

In this way you are able to override only color-yiq and everything should be OK.

Not a nice solution thought :/

[DaleMckeown]

Yeah, the problem with modifying the core Bootstrap files is that whenever someone pulls Bootstrap from a package manager, it overwrites the files and then we lose our (visually important) changes.

Hence I think the core team need to put some more thought into providing a proper mechanism for overriding mixins.

[Sebiworld]

I ran into the same issue, too. The generated button for my custom color has a black text-color, but I needed white.

@DaleMckeown A good workaround for me is to copy all imports from bootstrap.scss to a custom file in my project structure. Instead of importing only bootstrap.scss like @import "bootstrap/scss/bootstrap";, I now import every part of bootstrap individually:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "mixins_override";
@import "bootstrap/scss/print";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/code";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/jumbotron";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/media";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
@import "bootstrap/scss/utilities";

Please notice the updated paths. On this way, you can include a custom mixin_override.scss like @wojtask9 said, and update bootstrap without losing your changes.

But I look forward to a nicer solution overriding bootstrap's core mixins and functions...

[DaleMckeown]

@Sebiworld Thanks for the suggestion. In the absence of a better solution, I've implemented the same thing as you have.

This issue was probably an unintended consequence from the change from LESS to SASS. Let's hope the core team can provide something a bit better in future versions.

[XhmikosR]

/CC @mdo

[markwoon]

We're experiencing similar issues here. I'd love to see an official way to override mixins.

[adampatterson]

@Sebiworld I take a similar approach, but the main issue I see is structure changes form the framework which has happened in 3.*.

But like I said, I do this as well and mostly to remove styling that I don't use.

I also don't want to rewrite mixens, I think they are the reason Bootstrap is so good.

[mdo]

I'd suggest duplicating or augmenting the mixins manually—we've no plans to dive deep into Sass placeholders or anything like that at this point.

[adampatterson]

@mdo I think that the biggest issue people had was Bootstrap determining colours for us.

[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?

[DaleMckeown]

@francescozaia This has already been done in #24426

It's currently targetted for Beta 3.

[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.

[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.