CODEWITHSUNDEEP
twitter-bootstrapsass
mattrick
mattrick

Reputation: 3890

SASS Importing In Wrong Order

I'm currently having an issue with SASS. When using the @import statement, it doesn't seem to acknowledge that I am importing a certain file before the others, causing some variables not to be declared. I am trying to make some simple changes to Bootstrap. The folder structure is as follows:

folder structure

My app.scss is the main entry point, which is as follows:

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Droid+Sans+Mono|Droid+Serif'); //Basic fonts
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap"; //Bootstrap
@import "bower_components/font-awesome/scss/font-awesome"; //Font Awesome

//Bootstrap style changes
@import "variables";

@import "components/alerts";
@import "components/buttons";
@import "components/dropdowns";
@import "components/forms";
@import "components/labels";
@import "components/navbars";
@import "components/pagination";
@import "components/panels";
@import "components/progress";

The issue is, the variables file isn't being imported either at all or before the other files are being loaded. This is a rather odd thing that I can't seem to figure out. I'd appreciate any help you can provide :)

Upvotes: 11

Views: 11533

Answers (2)

Adam Jagosz
Adam Jagosz

Reputation: 1594

Bootstrap variables are declared with the !default flag, which means your file overriding those variables must be imported before the Boostrap files.

What does !default do? The assignment with this flag only takes effect if the variable wasn't declared before. That is to say, your override file does change those variables (unless you use the !default flag as well), but it does so after Boostrap had the chance to actually consume the variables. Example:

/*  bootstrap/scss/_variables.scss */
$alert-padding-y: .75rem !default;
$alert-padding-x: 1.25rem !default;

/*  bootstrap/scss/_alert.scss */
.alert {
  padding: $alert-padding-y $alert-padding-x; /* values are used */
}

/* your override */
$alert-padding-y: .5rem; /* values are changed, but a bit too late */
$alert-padding-x: 1rem;

Upvotes: 1

kasperoo
kasperoo

Reputation: 1584

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.

e.g.

// 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;`

Upvotes: 28

Related Questions