murtaza52 murtaza52 - 2 months ago 5x
Sass (Sass) Question

can I override sass variables after they have been imported?

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 ?


I have pushed the project on github -

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


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.