How to override boot mixin without changing source code?

Question

I am using Bootstrap 4 and I would like to change the default style for hover and active button states. They cannot be changed using variables, as they are hard-coded into Sass mixins. For instance:

@mixin button-variant($color, $background, $border) {
  $active-background: darken($background, 10%);
  $active-border: darken($border, 12%);
  ...

To get the style I want, I need to change the dimming to lighten, and then change the percentage.

I could change the source code, but this does not seem like a good solution for maintenance. I could also override these values ​​with my own css file included after Bootstrap, but then I basically need to copy the entire original button button from Bootstrap and change it. Since there are many options for buttons, there will be many overrides that would be superfluous if I could include the changes in Bootstrap css.

A better solution would be to override the entire mixin pool option in Bootstrap before compiling, so that in the compiled Bootstrap file there is only the css that I want. What would be the best way to do this?

Answer 1

- - , : https://github.com/sass/sass/issues/240

, . , , . ( "bootstrap-sass/assets/stylesheets/bootstrap" ):

/*!
 * Bootstrap v3.3.7
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT
 */

// Core variables and mixins
@import "own_variables";
@import "bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "bootstrap-sass/assets/stylesheets/bootstrap/mixins";
@import "own_mixins";

// ... rest of bootstrap includes which use the mixins to create classes

Answer 2

mixin, .

/scss/site.scss

// libraries
@import 'libraries/bootstrap/bootstrap';

// your custom sass files
@import 'overrides/bootstrap/mixins';

/scss/overrides/bootstrap/mixins.scss

@mixin button-variant($color, $background, $border) {
  $active-background: darken($background, 10%);
  $active-border: darken($border, 12%);
  ...