Bootstrap-Sass：使用其他变量覆盖变量答案

【问题标题】：Bootstrap-Sass: Overriting Variables with using other VariableBootstrap-Sass：使用其他变量覆盖变量
【发布时间】：2015-05-13 07:29:47
【问题描述】：

我在我的一个项目中使用 Bootstrap-sass，我想用 Sass 变量自定义它（当然）。

我创建了一个名为“_variables.scss”的新 .scss 文件，并在 bootstrap-sass 文件之前将其导入到我的主 .scss 文件中。它工作正常，直到我达到一点：

如果我想在我的自定义中使用 bootstrap-sass 变量，它显然会声明该变量是未知的（因为它是稍后导入的）。但是如果我想以正确的方式更改某些变量，这是不可避免的，例如：

$container-desktop: (940px + $grid-gutter-width);

如果我只想将 940px 的“固定”值更改为某个值，但我仍想在我的定义中使用 $grid-gutter-width 变量，我会收到上面解释过的这个错误。

任何想法我可以如何做到这一点？

【问题讨论】：

stackoverflow.com/questions/19430217/…stackoverflow.com/questions/19393264/…
我怀疑链接到其他两个问题对 stackoverflow 是否很有帮助。这实际上很蹩脚。实际上，这些链接并不能真正回答我的问题。它解决了我的网格问题，但这只是一个例子。我可以通过手动将$grid-gutter-width 设置为30px 来轻松管理此问题，但这通常不是最佳实践。如何用 bootstrap-sass 变量覆盖 bootstrap sass 变量更为普遍：D
恐怕你得加个文件覆盖变量或者直接修改bootstrap sass文件。
您不能使用尚未声明的变量。
这不是您的问题的解决方案，它描述了您的问题！如果您阅读问题和解决方案，您将了解问题的根源，特别是：stackoverflow.com/questions/19430217/…

【解决方案1】：

我见过的唯一解决方案是声明您所依赖的变量。因此，在 bootstrap-sass 的 _variables.scss 中，您可以找到 $grid-gutter-width: 30px !default; 行并在您自己的文件中使用它，如下所示：

$grid-gutter-width: 30px;
$container-desktop: (940px + $grid-gutter-width);

正如您想象的那样，只复制这样的信息是很不幸的，特别是如果您最终不得不复制几个变量定义来声明您真正想要的一个。如果有人有更“干”的解决方案，我也会非常感兴趣。

【讨论】：

如果有人写了一个程序来查看你的变量声明（在这种情况下，只是$container-desktop），然后创建一个_variables.scss的临时副本替换变量声明，那就太棒了-地方。然后你可以将修改后的_variables.scss 传递给 sass 编译器。这实际上可以解决问题 - 无需重新声明 $grid-gutter-width。