css - Sass 变量声明优先级

Question

我在两个文件中声明同名变量。我按以下顺序导入它们并发现冲突。

模态的.scss

$gray : #e1e1e1;    // Imported first

变量.scss

$gray : #999;       // imported later

预期的行为是$gray被覆盖的值。但是，我在 CSS 中获得了第一个导入的值 ( #e1e1e1) 而不是 ( )。#999

我做错了多次声明变量吗？

Answer 1

显然，Sass 将采用第一个变量声明。

例如，当您在 Sass 中使用 Bootstrap 时，您必须在导入 Bootstrap之前声明要覆盖的所有变量。

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

// Importing Bootstrap
@import 'bootstrap';

Answer 2

关于 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

在函数内部，mixins 和 selectors 变量是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)
}

您可以使用!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  

Answer 3

我认为您应该修改颜色名称，例如light-gray: #e1e1e1;and dark-gray: #999;。这将有助于解决您的问题。

Answer 4

你应该保持你的变量名唯一以减少冲突。

尝试：

$gray : #999 !important;