如何覆盖这些 Bootstrap 3 颜色

Question

在 Bootstrap 3 中，我可以覆盖品牌主色，但不能覆盖其他品牌颜色，例如品牌成功。为什么会这样？

我正在使用 Bootstrap 作为 Laravel 5.5 安装的一部分，包括 Laravel Mix、webpack 等前端工具。

在我的 main.scss 文件的顶部，我有以下两行：

@import "_variables";
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

在我的 _variables.scss 文件的顶部，我有以下两行：

$brand-primary: #ff0000;
$brand-success: #ff0000;

如您所见，我将brand-primary 和brand-success 都设置为纯红色。

在我的 html 中，如果我使用 <div class="panel panel-primary"> 创建一个面板，该面板将有一个红色边框。但是，如果我使用 <div class="panel panel-success">，面板将保持其原始绿色。

当我查看 div 元素上的层叠 CSS 规则列表时，我看不到红色被覆盖的痕迹，所以一定是 SASS 没有输出它。为什么会这样？

Answer 1

为什么我在浏览器中检查元素的 CSS 时看不到 sass 变量被覆盖？

Sass 被转换为 CSS，之后所有的 sass 变量都不再存在。虽然 sass 变量可能在 sass 的上下文中内具有级联行为，但我们无法在浏览器中检查 sass 变量的级联行为，因为浏览器只加载处理后的 CSS。

---

为什么.panel-success 没有使用我在$brand-primary 上设置的颜色值？

应用于.panel-success 类的颜色不是基于$brand-success 变量。

它们间接基于$state-success-text和$state-success-border的值，而不是基于$brand-success

.success-panel 颜色直接基于变量：

• $panel-success-text
• $panel-success-border
• $panel-success-heading-bg

来自bootstrap-sass _variables partial：

$panel-success-text:          $state-success-text !default;
$panel-success-border:        $state-success-border !default;
$panel-success-heading-bg:    $state-success-bg !default;

来自bootstrap-sass _panels partial：

.panel-primary {
  @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
}