Предимство на декларацията на променлива Sass

Очевидно Sass ще приеме първата декларация на променлива.

Например, когато използвате Bootstrap в Sass, трябва да декларирате всички променливи, които искате да замените, преди да импортирате Bootstrap.

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

// Importing Bootstrap
@import 'bootstrap';

Бързи бележки за SCSS променливите

Когато бъде обработен, Sass ще изведе текущата стойност на променлива

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

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

Можете да използвате флага !default, за да дефинирате променливи по подразбиране.

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

Вътре във функцията, променливите миксини и селектори са локални.

$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)
}

Можете да използвате флага !global за глобализиране на променливи.

$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  

мисля, че трябва да промените името на цвета като light-gray: #e1e1e1; и dark-gray: #999;. това ще помогне за разрешаването на вашия проблем.

Трябва да запазите имената на вашите променливи уникални, за да намалите конфликтите.

опитвам:

$gray : #999 !important;