twitter bootstrap - 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.