Css Sass变量声明优先级

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

Modal.scss

$gray:#e1e1；//先进口

Variable.scss

$gray:#999；//后来进口的

预期的行为是覆盖

$gray

的值。但是，我在CSS中得到的是第一个导入的值（

#e1e1e1

），而不是（

#999

）

---

我多次声明变量是不是做错了？

您应该保持变量名的唯一性，以减少冲突

尝试：

---

我认为你应该修改颜色名称，比如浅灰色：#e1e1和

深灰色：#999。这将有助于解决您的问题。
显然，Sass将首先声明变量

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

//这将覆盖引导中的默认$brand primary
$brand primary:#000；
//导入引导
@导入“引导”；
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 !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  

在函数内部，mixin和selector变量是本地的

$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; 
$color: blue !default;       // only used if not defined earlier
.class-1 { color: $color; }  // red

$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  

你试过倒序吗？试试
$gray:#999！重要的我建议您使用一些颜色命名服务，以避免对多个变量使用相同的名称。@LukaszMuzyka是的，它采用的是第一次声明时给出的第一个值。@Fergoso我不是在问解决方案。这是关于sass如何对待变量的问题，我知道这是可以做到的，但问题是其他的。我不想要解决方案。我很想知道sass是如何处理变量的。嘿，变量处理部分下面的这个链接有助于理解变量声明。它说Sass的局部作用域优先于全局作用域。谢谢DarshakUsing！重要永远是最后的选择，而不是第一选择。@Fergoso我不是在问解决方案。它是关于sass如何处理变量的，请记住bootstrap使用
！声明变量时的默认关键字。所以，你的答案可能不是真的