主題顏色

我們使用所有顏色的子集來(lái)創(chuàng)造較小的調(diào)色板以產(chǎn)生配色方案，也可以在Bootstrap的scss/_variables.scss 文件夾中將其作為Sass variables與Sass map來(lái)使用。

所有這些顏色都可以作為Sass地圖和 $theme-colors使用。

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

Check out our Sass maps and loops docs for how to modify these colors.

所有顏色

所有的Bootstrap色彩都可以作為scss/_variables.scss 文件夾中的Sass variables與Sass map做使用。為了避免增加文件大小，我們不會(huì)為每個(gè)變數(shù)創(chuàng)建文本或背景色彩類別。相反地，我們?yōu)橹黝}色彩選擇這些顏色的子集。

建立自定義色彩時(shí)，請(qǐng)確保其對(duì)比度。如下圖所示，我們?yōu)槊總€(gè)主題色彩添加了三個(gè)對(duì)比度，一個(gè)用于當(dāng)前色版的顏色，一種用于反白，以及一種用于反黑。

Sass提示

Sass無(wú)法以編程方式產(chǎn)生變量，因此我們手動(dòng)創(chuàng)造每一個(gè)色彩與陰影的變量。我們指明一個(gè)中間值（e.g.，$blue-500）并使用自定義色彩透過(guò)Sass的 mix()函數(shù)去著色（變亮）或加深（變暗）。

使用mix()不同于lighten()與darken()，前者將指定的色彩與白色或黑色混合，而后者僅調(diào)整每個(gè)色彩的亮度，最終產(chǎn)生一套更完整的色彩，如此CodePen示例中所示。

我們的tint-color()與shade-color()函數(shù)在$theme-color-interval變量旁使用mix()，他為我們的混合色彩指定了階層式的百分比值。有關(guān)完整的源代碼請(qǐng)參照scss/_functions.scss 與scss/_variables.scss文件。

Color Sass maps

BBootstrap的Sass文件包含三個(gè)maps，來(lái)幫助您快速輕松的循環(huán)顯示色彩及其十六進(jìn)制值的列表。

• $colors 出了我們能使用的基礎(chǔ)（500）顏色
• $theme-colors 列出了所有已與義命名的主題色彩（如下所示）
• $grays 列出了所有灰階的的色調(diào)與陰影

在scss/_variables.scss中，您將會(huì)找到Bootstrap的色彩變數(shù)與Sass map。這是$colors Sass map的示例：

$colors: (
"blue":       $blue,
"indigo":     $indigo,
"purple":     $purple,
"pink":       $pink,
"red":        $red,
"orange":     $orange,
"yellow":     $yellow,
"green":      $green,
"teal":       $teal,
"cyan":       $cyan,
"white":      $white,
"gray":       $gray-600,
"gray-dark":  $gray-800
);

在map中添加、移除或修改數(shù)值，以更新他們?cè)谠S多其他元件中的使用方式。不幸的是，此時(shí)并非每個(gè)元件都使用Sass map。未來(lái)的更新將努力對(duì)此進(jìn)行改進(jìn)。在此之前，請(qǐng)使用${color} 變量及此Sass map。

例子

您可以在Sass中使用這些方法：

.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}

顏色和背景通用類也可用于使用500個(gè)顏色值設(shè)置顏色和背景色。