6

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?

Eddie C.
  • 918
  • 10
  • 16
Alpesh Prajapati
  • 1,593
  • 2
  • 18
  • 38

4 Answers4

11

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';
Eddie C.
  • 918
  • 10
  • 16
Lukasz Muzyka
  • 2,783
  • 1
  • 30
  • 41
6

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
Community
  • 1
  • 1
Jakob E
  • 4,476
  • 1
  • 18
  • 21
-1

i think you should modified color name like light-gray: #e1e1e1; and dark-gray: #999;. this will help for solve your problem.

Darshak Shekhda
  • 646
  • 5
  • 7
  • I know this can be done but question is something else. I do not want solution. I am interested in knowing as how sass treats variables. – Alpesh Prajapati Sep 26 '14 at 06:52
  • Hey, this link under variable handling section helps in understanding variable declaration. It says Sass takes variable precedence of local scope over global. Thanks Darshak – Alpesh Prajapati Sep 26 '14 at 08:43
-2

You should keep your variable names unique to reduce conflicts.

try:

$gray : #999 !important;
Fergoso
  • 1,584
  • 3
  • 21
  • 44