sass - 通过引用其他变量覆盖 scss 变量

Question

从技术上讲，这不是 boostrap 的事情，而是 scss 的事情，但 Bootstrap 是我遇到问题的上下文。我正在更改引导程序中某些值的默认值。一个特定的变量，我想引用另一个引导变量。

所以我有自己的文件：

@import "_variable.overrides.scss";
@import "bootstrap.scss";

我的 _variable.overrides.scss 看起来像这样：

$secondary: lighten($primary, 10%);

我不能这样做，因为 $primary 是未定义的，因为我首先导入了我的覆盖 scss。如果我先导入 boostrap.scss，它不会覆盖，因为覆盖必须在默认变量定义之前。

有没有办法通过引用另一个变量来覆盖一个变量？

score 0 · Accepted Answer

基本上，这在here和here之前已经得到了回答。您需要首先@import 任何要在自定义 SCSS 中引用的变量。

由于$primary生活在 _variables.scss 中，您需要 @import_variables.scss和_functions.scss（因为这是由 _variables.scss 引用的）：

@import "bootstrap/functions";
@import "bootstrap/variables";

然后，如文档中所述，您的自定义变量将覆盖 Bootstrap，因为所有 Bootstrap 变量都使用该!default标志，这意味着它们不会优先于在Bootstrap之前导入的自定义变量。所以整个 SCSS 看起来像（您可能需要编辑路径）：

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "_variable.overrides.scss";
@import "bootstrap.scss";

1 回答 1