Sass：覆盖导入样式表的默认变量

Posted 2021-05-04

问题

关于覆盖!default变量 - 我有两个.sass文件：

main.sass

$variable: black

@import "_another_import.sass"
@import "_import.sass"

---

_import.sass

$variable: blue !default

body
    background: $variable

---

$variable在编译的CSS中解析为blue：

body {
    background: blue;
}

但是，如果我在导入_import.sass样式表之前指定覆盖变量值，Sass会将其编译为black：

main.sass

@import "_another_import.sass"

$variable: black

@import "_import.sass"

---

题

这种行为是有意的吗？有没有办法为!default变量值声明覆盖早于!default值在导入中声明（甚至可能在单独的文件中）？

---

实际设置（供参考）

我的实际设置比这复杂一点。我正在使用Myg（NPM组件）与myg-rails（生成文件结构来自定义变量）和Webpack。所以我有一个加载myg.sass和_variables.sass的_myg.sass文件。 _variables.sass加载了几个定义变量的其他文件。 _myg.sass导入Myg（NPM）组件。我验证了当我在_variables.sass中定义变量并使用它+在Myg组件中设置默认值时，默认值将覆盖已设置的值。

答案

不，你在做什么应该工作。您遇到的最终行为是不规则的，并非意图。

来自sass-lang docs：

如果尚未通过将！default标志添加到值的末尾来分配变量，则可以将其分配给变量。这意味着如果已经为变量赋值，则不会重新赋值，但如果它还没有值，则会给出一个。

我怀疑我们需要调查一些其他的东西。

我已经使用这些文件验证了正确的行为：

Sass来源：

_t1.sass

div
    margin: 0

_t2.sass

$c: blue !default

body
    background: $c

main.sass

$c: black

@import '_t1.sass'
@import '_t2.sass'

---

CSS结果：

div {
  margin: 0;
}

body {
  background: black;
}

它是预期的黑色。

另一答案

我的建议是： - 1）如果你想要黑色背景，那么你就是这样做的

// main.sass

@import "_another_import.sass";
@import "_import.sass";

// _import.sass
$variable: black;
body{
    background-color: $variable !important;
}

但我的建议是你的文件结构是这样的

    @import "_variable"; /*Define Variable in separate file & in that file declare $variable*/  
    @import "_another_import.sass";
    @import "_import.sass";

body{
    background-color: $variable !important;
}

另一答案

我认为你误解了!default的作用。它表示如果未分配变量，请使用此值。

如果尚未通过将！default标志添加到值的末尾来分配变量，则可以将其分配给变量。这意味着如果已经为变量赋值，则不会重新赋值，但如果它还没有值，则会给出一个。