Sass variable declaration precedence

Question

I am declaring variable of same name in two files. I import them in a following order and found a conflict.

Modal.scss

$gray : #e1e1e1;    // Imported first

Variable.scss

$gray : #999;       // imported later

The expected behaviour is that the value of $gray be overwritten. However, I am getting the firstly imported value (#e1e1e1) instead of (#999) in CSS.

Am I doing the wrong thing declaring variable multiple times?

Answer 1

Apparently, Sass will take first variable declaration.

For example when you use Bootstrap in Sass, you have to declare all variables you want to override before you import Bootstrap.

// This will override the default $brand-primary in Bootstrap
$brand-primary: #000;

// Importing Bootstrap
@import 'bootstrap';