Faarf
Bootstrap gëtt ënnerstëtzt vun engem extensiv Faarfsystem deen eis Stiler a Komponenten thematiséiert. Dëst erméiglecht méi ëmfaassend Personnalisatioun an Extensioun fir all Projet.
Thema Faarwen
Mir benotzen en Ënnerdeel vun alle Faarwen fir eng méi kleng Faarfpalette ze kreéieren fir Faarfschemaen ze generéieren, och verfügbar als Sass Variablen an eng Sass Kaart an der Bootstrap scss/_variables.scss
Datei.
All dës Faarwen sinn als Sass Kaart verfügbar $theme-colors
,.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Kuckt eis Sass Kaarten a Loops Dokumenter fir wéi Dir dës Faarwen ännert.
All Faarwen
All Bootstrap Faarwen sinn als Sass Variablen an eng Sass Kaart an der scss/_variables.scss
Datei verfügbar. Fir vergréissert Dateigréissten ze vermeiden, kreéiere mir keng Text- oder Hannergrondfaarfklassen fir all dës Variabelen. Amplaz wielen mir e Subset vun dëse Faarwen fir eng Themepalette .
Gitt sécher Kontrastverhältnisser ze iwwerwaachen wéi Dir Faarwen personaliséiert. Wéi hei ënnendrënner, hu mir dräi Kontrastverhältnisser zu jiddereng vun den Haaptfaarwe bäigefüügt - eng fir déi aktuell Faarwen vun der Swatch, eng fir géint Wäiss, an een fir géint Schwaarz.
Notes op Sass
Sass kann net programmatesch Variabelen generéieren, sou datt mir manuell Variablen fir all Tint a Schiet selwer erstallt hunn. Mir spezifizéieren de Mëttelpunktwäert (zB, $blue-500
) a benotze personaliséiert Faarffunktiounen fir eis Faarwen iwwer Sass seng Faarffunktioun ze schaarfen (beliichten) oder ze schaarfen (däischter) mix()
.
D'Benotzung mix()
ass net d'selwecht wéi lighten()
an darken()
- dee fréiere vermëscht déi spezifizéiert Faarf mat wäiss oder schwaarz, während dee Leschten nëmmen de Liichtwäerter vun all Faarf upasst. D'Resultat ass eng vill méi komplett Suite vu Faarwen, wéi an dëser CodePen Demo gewisen .
Eis tint-color()
a shade-color()
Funktiounen benotzen mix()
niewt eiser $theme-color-interval
Variabel, déi e stepped Prozentsaz Wäert fir all gemëschte Faarf spezifizéiert déi mir produzéieren. Kuckt d' scss/_functions.scss
a scss/_variables.scss
Dateien fir de komplette Quellcode.
Faarf Sass Kaarten
Bootstrap Quell Sass Dateien enthalen dräi Kaarten fir Iech ze hëllefen séier an einfach iwwer eng Lëscht vu Faarwen an hir Hexwäerter ze schloen.
$colors
lëscht all eis verfügbar Basis (500
) Faarwen$theme-colors
Lëscht all semantesch benannt Thema Faarwen (ënnert gewisen)$grays
Lëscht all Téin a Schatten vu gro
Bannen scss/_variables.scss
fannt Dir Bootstrap Faarfvariablen a Sass Kaart. Hei ass e Beispill vun der $colors
Sass Kaart:
$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
);
Füügt, läscht oder ännert Wäerter bannent der Kaart fir ze aktualiséieren wéi se a villen anere Komponenten benotzt ginn. Leider zu dëser Zäit benotzt net all Komponent dës Sass Kaart. Zukünfteg Updates wäerte probéieren dëst ze verbesseren. Bis dohin, plangt d' ${color}
Verännerlechen an dës Sass Kaart ze benotzen.
Beispill
Hei ass wéi Dir dës an Ärem Sass benotze kënnt:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Faarf an Hannergrond Utility Klassen sinn och verfügbar fir d'Faarfwäerter ze setzen color
an ze background-color
benotzen 500
.