首页 文章

如何覆盖这些Bootstrap 3颜色

提问于
浏览 次
0

在Bootstrap 3中，我可以覆盖brand-primary，但没有其他品牌颜色，例如品牌成功 . 那为什么会这样？

我使用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;

正如您所看到的，我将品牌主要和品牌成功都设置为纯红色 .

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

当我查看div元素上的级联CSS规则列表时，我看不到红色的痕迹被覆盖，所以它必须是SASS没有输出它 . 那为什么会这样？

twitter-bootstrap sass

1 回答

  • 1

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

    Sass被转换为CSS，并且在该点之后不再存在所有sass变量 . 虽然sass变量可能在sass的上下文中具有级联行为，但是我们可以在浏览器中检查没有级联的sass变量，因为浏览器仅加载已处理的CSS .

    为什么.panel成功不使用我在$ brand-primary上设置的颜色值？

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

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

    .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);
}
    回复于

相关问题