Bootstrap v4：テーマカラーと標準カラーの違いは何ですか？

Question

Bootstrap v4.0.0.beta2では、カラーマップを使用しているため、$brand-primaryではなくtheme-color("primary")のような色を使用できます。

自分のカスタムCSSを追加して、ブートストラップの色を使いたいと思っていますが、テーマカラー機能を使用するのにはどのような利点がありますか？ $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？

カスタムファイルには、これらの変数を持つ標準的なCSSだけがあります。

Answer 1

theme-colors()は主に内部的にブートストラップによってすべてのテーマカラーを繰り返し使用します。ボタン、バッジ、アラートなどのようなコンポーネントは、各テーマカラーのCSSで「構築」されています。代わりに...これは非常に簡単です。..

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

を

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

を行うのでこれはまた、すべてのテーマの使用を必要とする新しい要素とブートストラップを延長したりカスタマイズするときに、それが簡単に利用することになるだろう色。

しかし、あなたは、「私のカスタムファイル内の任意の空想SASSのもの、これらの変数を持つだけで、標準のCSSをやっていない」している場合、それだけで色の変数を参照するのが最も簡単でしょう...

$primary、$gray-300、 etc ...