Sass variable declaration precedence

问题

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

FileName: Modal.scss

 $gray : #e1e1e1;    // Imported first

FileName: Variable.scss

 $gray : #999;       // imported later

Expected behaviour is that Value should be overwritten. However, I am getting First imported value (#e1e1e1) instead of (#999)in CSS.

Am I doing the wrong thing declaring variable multiple times?

回答1:

Apparently, it will take first variable declaration.

For example when you use bootstrap in Scss you have to declare all variables you want to override BEFORE you import bootstrap.

$brand-primary: #000;

@import 'bootstrap';

回答2:

Quick notes on SCSS variables

When processed Sass will output the current variable value

$color: red;
.class-1 { color: $color; }  // red

$color: blue;
.class-2 { color: $color; }  // blue

You can use the !default flag to define default variables.

$color: red; 
$color: blue !default;       // only used if not defined earlier
.class-1 { color: $color; }  // red

Inside function, mixins and selectors variables are local.

$color: red; // global  

@mixin color { 
    $color: blue; // local
    color: $color
}

.class-1 { color: $color;  } // red  (global)
.class-2 { @include color; } // blue (local)


.class-3 { 
    $color: green;  // local
    color: $color;  // green (local)
}
.class-4 { 
    color: $color;  // red (global)
}

You can use the !global flag to globalize variables.

$color: red; // global  
@mixin color { 
    $color: blue !global; // global
    color: $color
}

//  as we are including color after printing class-1 the color is still red
.class-1 { color: $color;  } // red   
.class-2 { @include color; } // blue

//  at this point the include in class-2 changed the color variable to blue  
.class-3 { color: $color;  } // blue