Question

我正在将我目前的一些CSS转换为SASS，真正享受它;但是，我遇到了关于使用变量的问题。我正在尝试将主要CSS中的组件重构为它们自己的组件。我使用Bootstrap的SASS端口作为指导。

我正在尝试设置主题，因此我在导入组件之前重写变量;但是，如果我这样做，组件不会继承新值。这就是我的主要SCSS的样子：

$btn-font-weight: bold; // Overriding $btn-font-weight: normal !default;
@import 'variables.scss';
@import 'Components/buttons.scsss';

_variables.scss

$btn-font-weight: normal !default;

_buttons.scss

button {
  font-weight: $btn-font-weight;
}

字体粗细仍然正常。但是，如果我不重构按钮组件（并保留在主SCSS中），它会被覆盖。我显然遗漏了一些东西。

谢谢，史蒂文M。

编辑：谢谢你，Cimmanon，我现在已经集中了这个问题。

Answer 1

在SASS中为变量声明!default基本上说“嘿，这个变量意味着这个，除非在其他地方另有说明”。 This "somewhere else" can be above or below your variable，这使得创建主题或使用框架非常方便，您希望保留供应商提供的文件，以备将来更新。

因此，您应该能够在main.scss中声明$btn-font-weight: normal;并让它覆盖_variables.scss中的下游$btn-font-weight: bold !default;。

那就是说，基于你的回答，将$btn-font-weight: normal;移动到你的main.scss的末尾正确编译，我怀疑你在其他一个导入的文件中有另一个$btn-font-weight: not-!default或者你错过了分号或一些这样的语法错误。