如何使用 variable.scss 在引导程序中更改主按钮的颜色？答案

【问题标题】：How to change color of primary button in bootstrap using variable.scss?如何使用 variable.scss 在引导程序中更改主按钮的颜色？
【发布时间】：2019-07-04 20:38:05
【问题描述】：

我使用variable.scss 文件来自定义我的按钮。我的问题是不使用 CSS 而只使用 SCSS。

我从改变原色（#66cccc）和字体（RobotoSlab）开始：

$primary: #66cccc;
$font-family-base: RobotoSlab;

但我想要白色的文本（见屏幕截图），但我的字体是黑色的

bootstrap 根据原色计算黑/白颜色（如果比较深或比较浅）

【问题讨论】：

标签： twitter-bootstrap sass

【解决方案1】：

您是对的，引导程序根据背景颜色定义文本颜色并使文本变亮或变暗。但是可以配置。

如果深入挖掘，您会看到 Bootstrap 使用函数 color-yiq (source) 来确定文本应该是深色还是浅色。所以基本上你需要两件事来获得按钮的白色文本：

调整$yiq-contrasted-threshold的值
确保$yiq-text-light 等于白色（默认为true，因此您可能无需担心）

【讨论】：

yiq-contrasted-threshold 的默认值为 150，有效范围为 0 到 255。
在 bootstrap 5 中，这些变量已重命名：$yiq-contrasted-threshold 重命名为 $min-contrast-ratio 和 $yiq-text-dark 和 $yiq-text-light 分别重命名为 $color-contrast-dark 和 $color-contrast-light。它们的含义也略有不同：参见getbootstrap.com/docs/5.0/migration/#sass