Kɔlɔ
Bootstrap na wan big kala sistem we de tim wi stayl ɛn kɔmpɔnɛnt dɛn de sɔpɔt am. Dis de mek yu ebul fɔ kɔstɔmayshɔn ɛn ɛkstenshɔn mɔ kɔmprɛhɛnsif fɔ ɛni prɔjek.
Di tim kɔlɔ dɛn
Wi de yuz wan sɔbsɛt fɔ ɔl di kɔlɔ dɛn fɔ mek wan smɔl kɔlɔ palet fɔ jenarayz kɔlɔ skim dɛn, we de bak as Sass vɛriɔbul dɛn ɛn wan Sass map na Bootstrap in scss/_variables.scss
fayl.
Ɔl dɛn kɔlɔ ya de as Sass map, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Chek wi Sass maps en loops docs fo hau fo modify dis kala dem.
Ɔl di kɔlɔ dɛn
Ɔl di Bootstrap kɔlɔ dɛn de as Sass vɛriɔbul dɛn ɛn wan Sass map insay scss/_variables.scss
fayl. Fɔ mek di fayl saiz dɛn nɔ bɔku, wi nɔ de mek tɛks ɔ bakgrɔn kɔlɔ klas fɔ ɛni wan pan dɛn vɛriɔbul dɛn ya. Bifo dat, wi kin pik wan smɔl pat pan dɛn kɔlɔ dɛn ya fɔ wan tim palet .
Mek shɔ se yu de wach di kɔntrast ratio dɛn as yu de kɔstɔmayt di kɔlɔ dɛn. As wi si dɔŋ ya, wi dɔn ad tri kɔntrast ratio to ɛni wan pan di men kɔlɔ dɛn—wan fɔ di kɔlɔ dɛn we di swatch gɛt naw, wan fɔ agens wayt, ɛn wan fɔ agens blak.
Notis dɛn bɔt Sass
Sass nɔ kin programmatically jenarayz variebul, so wi manually kriet variebul fɔ ɛvri tint ɛn shed wisɛf. Wi de spɛsifa di midpɔynt valyu (ɛgz., $blue-500
) ɛn yuz kɔstɔm kɔlɔ fɛnshɔn dɛn fɔ tint (layt) ɔ shed (dak) wi kɔlɔ dɛn tru Sass in mix()
kɔlɔ fɛnshɔn.
Yuz mix()
nɔto di sem wit lighten()
ɛn darken()
—di fɔs wan de miks di kɔlɔ we dɛn dɔn tɔk bɔt wit wayt ɔ blak, we di las wan de jɔs ajɔst di layt valyu fɔ ɛni kɔlɔ. Di rizulyt na wan bɔku mɔ kɔmplit suit fɔ kɔlɔ dɛn, lɛk aw dɛn sho na dis CodePen demo .
Wi tint-color()
ɛn shade-color()
fɛnshɔn dɛn de yuz mix()
alongsay wi $theme-color-interval
vɛriɔbul, we de spɛsifa wan stɛp pasɛnt valyu fɔ ɛni miks kɔlɔ we wi de prodyuz. Si di scss/_functions.scss
ɛn scss/_variables.scss
fayl dɛn fɔ di ful sɔs kɔd.
Map dɛn na Sass we gɛt kɔlɔ
Bootstrap in sɔs Sass fayl dɛn gɛt tri map dɛn fɔ ɛp yu fɔ lɔp kwik ɛn izi wan oba wan list fɔ di kɔlɔ dɛn ɛn dɛn heks valyu dɛn.
$colors
list ɔl di bays (500
) kɔlɔ dɛn we wi gɛt$theme-colors
list ɔl di tim kɔlɔ dɛn we gɛt sɛmantik nem (we dɛn sho dɔŋ ya)$grays
list ɔl di tint ɛn shed dɛn fɔ grey
Insay scss/_variables.scss
, yu go si Bootstrap in kɔlɔ vɛriɔbul dɛn ɛn Sass map. Na wan ɛgzampul fɔ di $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
);
Ad, pul, ɔ chenj valyu dɛn insay di map fɔ ɔpdet aw dɛn de yuz dɛn na bɔku ɔda kɔmpɔnɛnt dɛn. Na ɔnfɔni na dis tɛm, nɔto ɔl kɔmpɔnɛnt de yuz dis Sass map. Di ɔpdet dɛn we dɛn go gɛt tumara bambay go tray fɔ mek dis bɛtɛ. Te da tɛm de, plan fɔ mek yus to di ${color}
vɛriɔbul dɛn ɛn dis Sass map.
Ɛgzampul
Na so yu kin yuz dɛn wan ya na yu Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Kɔlɔ ɛn bakgrɔn yutiliti klas dɛn de bak fɔ sɛt color
ɛn background-color
yuz di 500
kɔlɔ valyu dɛn.