Sass变量声明优先级

Question

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

Modal.scss

$gray : #e1e1e1;    // Imported first

Variable.scss

$gray : #999;       // imported later

预期行为是变量$gray的值被覆盖。然而，在CSS中，我得到了第一个导入的值（#e1e1e1）而不是（#999）。

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

- Alpesh Prajapati

---

你尝试过反转顺序吗？ - Lukasz Muzyka

尝试 $gray : #999 !important; - Fergoso

我建议您使用一些颜色命名服务，比如这个，以避免在多个变量中使用相同的名称。 - Vucko

@LukaszMuzyka 是的，它会取第一个声明时给定的值。 - Alpesh Prajapati

@Fergoso 我不是在寻求解决方案，而是关于Sass如何处理变量的问题。 - Alpesh Prajapati

嘿@Vucko，是的，我可以使用不同的名称，但我担心Sass的变量声明... - Alpesh Prajapati

Answer 1

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

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

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

// Importing Bootstrap
@import 'bootstrap';

- Lukasz Muzyka

---

请记住，Bootstrap 在声明变量时使用 !default 关键字。因此，你的答案可能不正确。 - Noname

不确定为什么这个答案得分最高。它是完全错误的。 - cartbeforehorse

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变量是局部的。

$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  

- Jakob E

Answer 3

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

- Darshak Shekhda

---

我知道这是可以做到的，但问题是另外一件事。我不想要解决方案。我对了解sass如何处理变量感兴趣。 - Alpesh Prajapati

嘿，在变量处理部分下面的这个链接有助于理解变量声明。它说Sass优先考虑局部作用域而不是全局作用域。谢谢Darshak。 - Alpesh Prajapati

Answer 4

为了减少冲突，您应该保持变量名称的唯一性。

尝试：

$gray : #999 !important;

- Fergoso

---

使用 !important 应该始终是最后的选择，而不是首选。 - Lukasz Muzyka

@Fergoso 我不是在问解决方案。这是关于sass如何处理变量的问题。 - Alpesh Prajapati