SASS：覆盖外部组件中的变量答案

【问题标题】：SASS: Overriding Variables in External ComponentsSASS：覆盖外部组件中的变量
【发布时间】：2014-11-18 22:14:45
【问题描述】：

我正在将我当前的一些 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，我现在把问题集中在了。

【问题讨论】：

就我所见，你已经做好了一切。您在 main.scss 中的 $btn-font-weight:bold 没有 !default 声明正确？如果你在导入 variables.scss 之后声明你的变量呢？
我移动了变量，现在它似乎可以工作了。我不明白它，因为它声明它应该在变量之前。好吧，我真的很感谢你的帮助。如果您将答案移至“答案”，我会将其标记为正确。

标签： variables import sass

【解决方案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，或者您丢失了分号或一些这样的语法错误。

You can to compile with sourcemaps enabled to debug this problem, as described in this link.

【讨论】：