Mtundu
Bootstrap imathandizidwa ndi mitundu yambiri yamitundu yomwe imakhala ndi masitayelo athu ndi zida zathu. Izi zimathandizira makonda ambiri komanso kukulitsa projekiti iliyonse.
Mitundu yamutu
Timagwiritsa ntchito kagawo kakang'ono kamitundu yonse kuti tipange utoto wocheperako popanga masikimu amitundu, omwe amapezekanso ngati mitundu ya Sass ndi mapu a Sass mufayilo ya Bootstrap scss/_variables.scss
.
Mitundu yonseyi ikupezeka ngati mapu a Sass $theme-colors
,.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Onani mamapu athu a Sass ndi loops docs momwe mungasinthire mitundu iyi.
Mitundu yonse
Mitundu yonse ya Bootstrap ilipo ngati mitundu ya Sass ndi mapu a Sass mufayilo scss/_variables.scss
. Kuti tipewe kukula kwa mafayilo, sitipanga makalasi amtundu wamtundu kapena wakumbuyo pamitundu yonseyi. M'malo mwake, timasankha kagawo kakang'ono ka mitundu iyi papaleti yamutu .
Onetsetsani kuti mukuyang'anira kusiyanitsa kosiyana pamene mukusintha mitundu. Monga tawonetsera m'munsimu, tawonjeza mitundu itatu yosiyana ku mtundu uliwonse waukulu—imodzi yamitundu yaposachedwa ya mawotchi, ina yotsutsa yoyera, ndi ina yakuda.
Zolemba pa Sass
Sass sangathe kupanga zosinthika mwadongosolo, chifukwa chake tidapanga zosinthika patokha ndi mthunzi uliwonse. Timatchula mtengo wapakati (mwachitsanzo, $blue-500
) ndikugwiritsa ntchito mitundu yamitundu kuti tiunikire (kuwalitsa) kapena kutidetsa (kuda) mitundu yathu pogwiritsa mix()
ntchito mtundu wa Sass.
Kugwiritsira ntchito mix()
sikufanana lighten()
ndi darken()
—choyambacho chimasakaniza mtundu wotchulidwawo ndi woyera kapena wakuda, pamene chotsiriziracho chimangosintha kupepuka kwa mtundu uliwonse. Zotsatira zake zimakhala zamitundu yambiri, monga momwe ziwonetsedwera mu chiwonetsero cha CodePen ichi .
Zathu tint-color()
ndi shade-color()
ntchito zimagwiritsa ntchito mix()
limodzi ndi $theme-color-interval
kusintha kwathu, komwe kumatanthawuza kuchuluka kwa mtengo wamtundu uliwonse womwe timapanga. Onani scss/_functions.scss
ndi scss/_variables.scss
mafayilo amtundu wathunthu.
Mapu amtundu wa Sass
Mafayilo a Sass a Bootstrap ali ndi mamapu atatu kuti akuthandizeni mwachangu komanso mosavuta kuzungulira mndandanda wamitundu ndi ma hex ake.
$colors
imatchula mitundu yathu yonse yopezeka (500
)$theme-colors
imalemba mitundu yonse yamutu wamutu (yowonetsedwa pansipa)$grays
amalemba mitundu yonse yamitundu ndi imvi
Mkati scss/_variables.scss
, mupeza mitundu yamitundu ya Bootstrap ndi mapu a Sass. Nachi chitsanzo cha $colors
mapu a Sass:
$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
);
Onjezani, chotsani, kapena sinthani zinthu zomwe zili pamapu kuti zisinthe momwe zimagwiritsidwira ntchito m'zigawo zina zambiri. Tsoka ilo panthawiyi, sizinthu zonse zomwe zimagwiritsa ntchito mapu a Sass. Zosintha zamtsogolo zidzayesetsa kukonza izi. Mpaka pamenepo, konzekerani kugwiritsa ntchito ${color}
zosinthika ndi mapu a Sass awa.
Chitsanzo
Umu ndi momwe mungagwiritsire ntchito izi mu Sass yanu:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Makasitomala amtundu ndi zakumbuyo amapezekanso pakukhazikitsa color
ndikugwiritsa background-color
ntchito 500
mitundu yamitundu.