Bootstrap v4：主题颜色与标准颜色变量的意义何在？

Question

在引导v4.0.0.beta.2他们使用彩色图也使我们能够使用的颜色一样，theme-color("primary")而不是$brand-primary现在。

我的问题是，当我添加自己的自定义CSS并想使用Bootstrap中的颜色时，使用theme-color函数而不是仅获取它基于的变量（例如）有什么好处$primary？

在引导变量文件中，它们具有：

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$theme-colors: () !default;
$theme-colors: map-merge((
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
), $theme-colors);

我为什么不只用$primary呢？还是$gray-300？

我没有在自定义文件中做任何花哨的SASS事情，只是使用这些变量的标准CSS。

Answer 1

theme-colors()主要由 Bootstrap 内部用于迭代所有主题颜色。有一堆组件，如按钮、徽章、警报等，它们是在 CSS 中为每个主题颜色“内置”的。而不是做..

   .badge-danger {
        @include badge-variant($danger);
   }
   .badge-warning {
        @include badge-variant($warning);
   }
   ...(repeat for each color)

这要容易得多...

@each $color, $value in $theme-colors {
  .badge-#{$color} {
    @include badge-variant($value);
  }
}

这也可以更容易地使用需要使用所有主题颜色的新元素来扩展或自定义 Bootstrap（例如像这样）。

但是，如果你“没有在我的自定义文件中做任何花哨的 SASS 东西，只是使用这些变量的标准 CSS”，那么引用颜色变量将是最简单的......

$primary, $gray-300, 等等...

相关：如何更改引导程序原色？