Question

在Bootstrap v4.0.0.beta.2中，他们也使用了颜色贴图，这使我们现在可以使用theme-color("primary")而不是$brand-primary这样的颜色。

我的问题是，当我添加自己的自定义CSS并希望使用引导程序中的颜色时，我有什么优势可以使用主题颜色函数而不是仅仅抓取它所基于的变量，例如{ {1}}？

在bootstrap变量文件中，他们有：

$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？

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

Answer 1

theme-colors()主要由Bootstrap内部用于迭代所有主题颜色。有许多组件，如按钮，徽章，警报等......是＆＃34;内置＆＃34;在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（like this for example）。

但是，如果您在我的自定义文件中没有做任何花哨的SASS内容，那么只需使用带有这些变量的标准CSS＆＃34;最简单的方法是引用颜色变量...

$primary，$gray-300等......

相关：How to change the bootstrap primary color?

Bootstrap v4：主题颜色与标准颜色变量有什么关系？

1 个答案: