Question

问题

关于覆盖!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组件中设置默认值时，默认值将覆盖已设置的值。

Answer 1

否，你在做什么应该有用。您遇到的结果是不规则的，不意图。

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

它是预期的黑色。

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标志添加到值的末尾来分配变量，则可以将其分配给变量。这意味着如果已经为变量赋值，则不会重新赋值，但如果它还没有值，则会给它一个。

Sass：覆盖导入样式表的

问题

问题

实际设置（供参考）

3 个答案:

Sass来源：

CSS结果：