Overriding Bootstrap default!


The cascade becomes complicated with sass partials, and this article explains it very nicely from Stack Overflow

If you want to overwrite default Bootstrap variables, you need to import your file before the actual Bootstrap variable partial. It’s because all their variables have !default flag. It means that if a variable has already been assigned to, the next time you try to re-assign it, it will ignore that (unless it didn’t have a variable assigned in the first place).

For example, let’s say that in Bootstrap’s _variables.scss partial there is:

$brand-primary: #555555 !default;

…then in the next file that you import after, you assign something else to $brand-primary it will be ignored – even if you specify the !default flag again. So that’s why you need to overwrite variable before Bootstrap does this.


// custom-bootstap.scss contents:
// Core variables and mixins
@import "custom/bootstrap/variables"; // custom/overwritten variables
@import "bootstrap/variables";
@import "bootstrap/mixins";
and inside custom/bootstrap/variables:
`$brand-primary: #000000!default;`

Partial order: The 7-1 Pattern

This is from SASS Guidelines

Back to architecture, shall we? I usually go with what I call the 7-1 pattern: 7 folders, 1 file. Basically, you have all your partials stuffed into 7 different folders, and a single file at the root level (usually named main.scss) which imports them all to be compiled into a CSS stylesheet.


And of course:


And is in turn referred to at Scotch