Bootstrap 4 自定义变量不会级联？

Posted 2023-03-06

【中文标题】Bootstrap 4 自定义变量不会级联？

【英文标题】：Bootstrap 4 custom variables don't cascade down?

【发布时间】：2017-07-31 06:33:27

【问题描述】：

所以这是我今晚发现的 bootstrap 中的 custom.scss 文件有点奇怪，我想知道我是否遗漏了什么。假设我将颜色 $blue 设置为自定义值（在这种情况下为 #000 只是为了便于阅读）并删除 _custom.scss 中的 !default 标志，就像我应该做的那样。在 _variables.scss 文件中，颜色 $brand-primary 设置为 $blue，带有 !default 标志。然后，$btn-primary-bg 设置为 $brand-primary，也带有一个 !default 标志。所以，我的想法是如果我设置：

$blue: #000000;

在 custom.scss 文件中，它应该使用 $blue 级联到任何变量，使其：

$brand-primary: $blue; set to #000 and then
$btn-primary-bg: $brand-primary; also set to #000000

好吧，事实证明我必须在自定义 sass 文件中列出所有 3 个实例并删除它们的 !default 标志，然后它们才会更改为自定义颜色。

所以我的自定义工作表只有一行

$blue: #000000;

应该是

$blue: #000000 ;
$brand-primary:  $blue;
$btn-primary-bg: $brand-primary;

在自定义颜色应用于这些类之前。

我在这里遗漏了什么吗？难道我们不应该只需要设置一次自定义颜色，然后引用它的任何变量也会引用该自定义颜色吗？在这一点上对我来说似乎效率低下。

【问题讨论】：

我认为这个答案会有所帮助：***.com/a/38225564/171456

【参考方案1】：

[在此处输入链接描述][1]已定义变量没有问题。可能您需要更改在 html 中使用它们的方式。看看下面的例子，它是根据您定义的变量提供的。我建议删除“$blue”变量并直接为“$brand-primary”变量定义颜色！

[1]: https://jsfiddle.net/negin/t36ep4e8/