Question

With bootstrap-sass you can overload variables by defining them before importing bootstrap (as in documentation):

$btnPrimaryBackground: #f00;
@import "bootstrap";

Sadly it doesn’t work with mixins since in SASS they can be redefined / overloaded.

What would be the best approach to overload a twitter bootstrap mixins ? So far the only way to do it seems to clone the gem in lib and add modify _mixins.scss or include my custom _mixins.scss after.

Any idea to make this more maintainable ?

Answer 1

According to the post, Reopen SASS Mixins, it is possible to override mixins. However, if you define your custom one prior to calling import "bootstrap"; the one defined inside Bootstrap will override it. On the other hand, if you place it after the import, all the Bootstrap code has finished compiling by the time you redefine the mixin (see Issue #240 and Issue #420). There is a potential that support for this latter option may be added in the future.

Until then, one option I can think of (haven’t tested) would be to separate out the variables and mixins from the _bootstrap.scss in order that you can redefine the mixins prior to use.

First, comment out the first two import statements in the _bootstrap.scss:

// Core variables and mixins
//@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
//@import "bootstrap/mixins";

Then in your SASS file which imports Bootstrap, it should be changed to include those:

$btnPrimaryBackground: #f00;

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Override of mixin for form field states
@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
  // customization here
}

@import "bootstrap";

Under this workflow, you’d still be editing the vendor files, but at least you could restrict it to merely a couple lines commented out.