can I override sass variables after they have been imported?

Question

I am using bootstrap-sass in my rails app. I want to override a bootstrap-sass variable $navbarBackground. bootstrap-sass also defines variables for colors. So instead of using the hex code I would like to use the variable $red that it defines.

$navbarBackground: #9d261d; @import "bootstrap"; 

However if I do the following -

$navbarBackground: $red; @import "bootstrap"; 

It will give me an error as the variable $red is only defined the bootstrap file which is imported in the next line.

So is there a way I can override sass variables after they have been imported ?

EDIT

I have pushed the project on github - https://github.com/murtaza52/rails-base

And the url is accessible on localhost:3000/posts/

Answer 1

Here is a what I realized. You can override sass variables after they have been imported. But the modification will be reflected only in the usage after overriding. Since navbar got styles before you overrode the $navbarBackground, just overriding the variable won't change styling. See below example.

@import "bootstrap"; @navbarBackground: $red; // This doesn't work. Navbar will still be same color. // But if you do write styles for navbar again .navbar-inner { background: $navbarBackground; } // Now, Navbar will have a red background  @import "bootstrap"; $blue: $white; // After this line, whenever your reference $blue, it'll generate white color. 

Answer 2

Bootstrap-sass is defining many variables in /bootstrap/_variables.scss in the style $brand-success: #5cb85c !default;. The sass keyword !default means:

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one. (→sass documentation)

This means you just have to define your variables first, before importing bootstrap-sass. I do it like so:

@import "common/project_variables"; @import "bootstrap"; 

Where my file project_variables.scss contains – among others – exactly all bootstrap variables I want to override.