Amadede
Bootstrap la doa alɔ amadede ƒe ɖoɖo gã aɖe si ƒoa tanya na míaƒe atsyãwo kple akpawo. Esia wɔnɛ be woate ŋu atrɔ asi le eŋu wòade to wu eye wòakekee ɖe enu na dɔ ɖesiaɖe.
Tanya ƒe amadedewo
Míezãa amadedewo katã ƒe akpa sue aɖe tsɔ wɔa amadede ƒe ƒuƒoƒo sue aɖe hena amadede ƒe ɖoɖowo wɔwɔ, si hã li abe Sass ƒe tɔtrɔwo kple Sass ƒe anyigbatata le Bootstrap ƒe scss/_variables.scss
faɛl me.
Amadede siawo katã li abe Sass ƒe anyigbatata ene, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Kpɔ míaƒe Sass maps kple loops docs hena alesi nàtrɔ asi le amadede siawo ŋu.
Amadedewo katã
Bootstrap ƒe amadedewo katã li abe Sass ƒe tɔtrɔwo kple Sass ƒe nɔnɔmetata le scss/_variables.scss
faɛl me ene. Be míaƒo asa na faɛl ƒe lolome ƒe dzidziɖedzi la, míewɔa nuŋɔŋlɔ alo megbe amadede ƒe hatsotsowo na tɔtrɔ siawo dometɔ ɖesiaɖe o. Ke boŋ míetia amadede siawo ƒe akpa sue aɖe na tanya ƒe ƒuƒoƒo aɖe .
Kpɔ egbɔ be yelé ŋku ɖe vovototo si le amadedewo dome ŋu esi nèle amadedewo trɔm. Abe alesi woɖee fia le ete ene la, míetsɔ vovototo ƒe sɔsɔme etɔ̃ kpe ɖe amadede veviawo dometɔ ɖesiaɖe ŋu—ɖeka na swatch la ƒe amadede siwo li fifia, ɖeka na amadede ɣiwo, eye ɖeka na amadede yibɔ.
Nuŋlɔɖiwo le Sass ŋu
Sass mateŋu awɔ tɔtrɔwo le ɖoɖo nu o, eyata míetsɔ asi wɔ tɔtrɔwo na tint kple shade ɖesiaɖe mía ŋutɔwo. Míegblɔa titina ƒe asixɔxɔ (le kpɔɖeŋu me, $blue-500
) eye míezãa amadede ƒe dɔwɔwɔ siwo wowɔ ɖe ɖoɖo nu tsɔ dea amadede (kekeli) alo doa vɔvɔli (doa viviti) míaƒe amadedewo to Sass ƒe mix()
amadede ƒe dɔwɔwɔ dzi.
Zãzã mix()
mesɔ lighten()
kple kple darken()
—gbãtɔa tsakaa amadede si wogblɔ la kple ɣi alo yevu, gake evelia ya trɔa asi le amadede ɖesiaɖe ƒe kekeli ƒe asixɔxɔ ŋu ko. Nusi do tso emee nye amadedewo ƒe hatsotso si de blibo wu sã, abe alesi woɖee fia le CodePen ƒe wɔwɔfia sia me ene .
Míaƒe tint-color()
kple shade-color()
dɔwɔwɔwo zãna mix()
kpe ɖe míaƒe $theme-color-interval
tɔtrɔɖenu ŋu, si gblɔa afɔɖeɖe ƒe alafa memamã ƒe asixɔxɔ na amadede tsakatsaka ɖesiaɖe si míewɔna. Kpɔ scss/_functions.scss
kple scss/_variables.scss
faɛlwo hena source code bliboa.
Amadede Sass ƒe anyigbatatawo
Bootstrap ƒe dzɔtsoƒe Sass faɛlwo me anyigbatata etɔ̃ le be wòakpe ɖe ŋuwò kabakaba eye wòanɔ bɔbɔe na loop ɖe amadedewo ƒe xexlẽdzesiwo kple woƒe hex asixɔxɔwo dzi.
$colors
ŋlɔ míaƒe gɔmeɖoanyi (500
) ƒe amadede siwo katã li la ɖi$theme-colors
yɔ tanya ƒe amadede siwo katã wotsɔ ŋkɔ na le gɔmesese nu (woɖee fia le ete) .$grays
ŋlɔ amadede kple amadede siwo katã le amadede dzẽ me la ɖi
Le scss/_variables.scss
, me la, àkpɔ Bootstrap ƒe amadede ƒe tɔtrɔwo kple Sass ƒe anyigbatata. $colors
Sass ƒe anyigbatata ƒe kpɔɖeŋu aɖee nye esi :
$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
);
Tsɔ asixɔxɔwo kpee, ɖe wo ɖa, alo trɔ asi le wo ŋu le anyigbatataa me be nàtrɔ asi le alesi wozãa wo le akpa bubu geɖe me ŋu. Nublanuitɔe le ɣeyiɣi sia me la, menye akpa ɖesiaɖee zãa Sass ƒe anyigbatata sia o. Nu yeye siwo woawɔ le etsɔme adze agbagba be yewoawɔ esia wòanyo ɖe edzi. Vaseɖe ɣemaɣi la, wɔ ɖoɖo ɖe ${color}
tɔtrɔawo kple Sass ƒe anyigbatata sia zazã ŋu.
Kpɔɖeŋu
Ale si nàte ŋu azã esiawo le wò Sass me enye si:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Amadede kple megbe dɔwɔnu ƒe klasswo hã li na amadede ƒe asixɔxɔwo ɖoɖo color
kple wo background-color
zazã .500
Dɔwɔnu siwo wozãna tsɔ wɔa dɔe
Wotsɔe kpe ɖe eŋu le v5.1.0 me
Bootstrap melɔ color
kple background-color
dɔwɔnuwo na amadede ƒe tɔtrɔ ɖesiaɖe o, gake àteŋu awɔ esiawo ŋutɔ kple míaƒe dɔwɔnu API kple míaƒe Sass anyigbatata siwo keke ta siwo wotsɔ kpe ɖe v5.1.0 me.
- Be nàdze egɔme la, kpɔ egbɔ be yetsɔ míaƒe dɔwɔwɔwo, tɔtrɔwo, mixins, kple dɔwɔnuwo va dukɔa me.
- Zã míaƒe
map-merge-multiple()
dɔwɔnua nàtsɔ aƒo Sass ƒe anyigbatata geɖewo nu ƒu kabakaba ɖe anyigbatata yeye aɖe me. - Tsɔ anyigbatata yeye sia ƒo ƒu ɖekae be nàkeke dɔwɔnu ɖesiaɖe ɖe enu kple
{color}-{level}
klass ŋkɔ.
Kpɔɖeŋu aɖe si wɔa nuŋɔŋlɔ ƒe amadede ƒe dɔwɔnuwo (le kpɔɖeŋu me, .text-purple-500
) to afɔɖeɖe siwo le etame zazã me lae nye esi.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
Esia ana woawɔ .text-{color}-{level}
dɔwɔnu yeyewo na amadede kple dzidzenu ɖesiaɖe. Àte ŋu awɔ nenema ke na dɔwɔƒe bubu ɖesiaɖe kple nunɔamesiwo hã.