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

Question

问题

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

main.sass

$variable: black

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

_import.sass

$variable: blue !default

body
    background: $variable

编译后的$variable解析为blue:CSS:

body {
    background: blue;
}

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

main.sass

@import "_another_import.sass"

$variable: black

@import "_import.sass"

问题

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

实际设置（供参考）

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

Answer 1

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

否，你所做的应该有效。您遇到的结果行为是不规则的，不是预期的。

来自sass-lang docs：

You can assign to variables if they aren't already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won't be re-assigned, but if it doesn't have a value yet, it will be given one.

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

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

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;
}

它是预期的黑色。

Answer 3

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

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

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

Sass: Overriding default variables of imported stylesheets

variables

import

default

sass

问题

问题

实际设置（供参考）

Sass 来源：

CSS 结果：