我在两个文件中声明了同名变量。我按照以下顺序导入它们,并发现冲突。
Modal.scss
$gray : #e1e1e1; // Imported first
Variable.scss
$gray : #999; // imported later
预期行为是变量
$gray
的值被覆盖。然而,在CSS中,我得到了第一个导入的值(#e1e1e1
)而不是(#999
)。
我多次声明变量是否做错了?
显然,Sass会采用第一个变量声明。
例如,当您在Sass中使用Bootstrap时,您必须在导入Bootstrap之前声明要覆盖的所有变量。
// This will override the default $brand-primary in Bootstrap
$brand-primary: #000;
// Importing Bootstrap
@import 'bootstrap';
!default
关键字。因此,你的答案可能不正确。 - Noname当Sass处理时,将输出当前变量值
$color: red;
.class-1 { color: $color; } // red
$color: blue;
.class-2 { color: $color; } // blue
$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)
}
$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;
$gray : #999 !important;
- Fergoso