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

Question

问题

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

ma​​in.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：

ma​​in.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 组件中设置一个默认值时，默认值将覆盖已经设置的值。

Answer 1

不，你正在做的应该工作。您遇到的由此产生的行为是不规则的，不是有意的。

来自sass-lang docs：

如果变量尚未分配，您可以通过将 !default 标志添加到值的末尾来分配它们。这意味着如果变量已经被赋值，则不会重新赋值，但如果它还没有值，则会被赋值。

我怀疑我们可能需要调查其他事情。

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

Sass 源代码：

_t1.sass

div
    margin: 0

_t2.sass

$c: blue !default

body
    background: $c

ma​​in.sass

$c: black

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

---

CSS 结果：

div {
  margin: 0;
}

body {
  background: black;
}

它是黑色的。

Answer 2

我的建议是：-
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;
}

Answer 3

我认为您误解了!default 的作用。就是说如果变量没有赋值，就使用这个值。

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