Sass变量声明优先级
我在两个文件中声明了同名变量。 我按以下顺序导入它们并发现冲突。
FileName：Modal.scss
$gray : #e1e1e1; // Imported first FileName：Variable.scss
$gray : #999; // imported later
预期的行为是应该覆盖Value。 但是，我在CSS中获得了第一个导入值（＃e1e1e1）而不是（＃999）。
我做错了多次声明变量吗？
显然，它将采取第一个变量声明。
例如，当您在Scss中使用引导程序时，必须在导入引导程序之前声明要覆盖的所有变量。
$brand-primary: #000; @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
内部函数，mixins和selectors变量是本地的 。
$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;