Lanu
O le Bootstrap e lagolagoina e se faiga lanu tele e faʻaulu ai a tatou sitaili ma vaega. O lenei mea e mafai ai ona sili atu le faʻavasegaina ma faʻalauteleina mo soʻo se poloketi.
Lanu autu
Matou te fa'aogaina se vaega o lanu uma e fai ai se pa'u lanu la'ititi mo le fa'atupuina o ata lanu, o lo'o avanoa fo'i e fai ma suiga Sass ma se fa'afanua Sass i le scss/_variables.scss
faila a Bootstrap.
O nei lanu uma e maua o se faafanua Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Siaki a matou fa'afanua Sass ma fa'amaufa'ailoga fa'ailoga mo le fa'afefeteina o nei lanu.
O lanu uma
O lanu uma o Bootstrap o loʻo avanoa e fai ma fesuiaiga Sass ma se faʻafanua Sass i scss/_variables.scss
faila. Ina ia aloese mai le faateleina o le tele o faila, matou te le faia ni tusitusiga po'o ni vasega lanu i tua mo nei fesuiaiga taitasi. Ae, matou te filifilia se vaega itiiti o nei lanu mo se paleti autu .
Ia mautinoa e mata'ituina fa'atusatusaga fa'atusatusa a'o e fa'avasega lanu. E pei ona faʻaalia i lalo, ua matou faʻaopoopoina faʻatusatusaga faʻatusatusa se tolu i lanu autu taʻitasi-tasi mo lanu o loʻo iai nei, tasi mo le paʻepaʻe, ma le tasi mo le uliuli.
Fa'amatalaga i Sass
E le mafai e Sass ona fa'apolokalameina le fa'atupuina o fesuiaiga, o lea na matou faia ai ma le lima ni fesuiaiga mo lanu uma ma paolo i matou lava. Matou te fa'amaoti le tau o le vaeluagalemu (fa'ata'ita'iga, $blue-500
) ma fa'aaoga galuega fa'aaganu'u lanu e fa'apupulaina ai (fa'amalama) po'o le paolo (pouliuli) o matou lanu e ala i le mix()
galuega lanu a Sass.
O le fa'aogaina mix()
e le tutusa ma le lighten()
ma darken()
—o le mea muamua e fa'afefiloi le lanu ma'oti ma le pa'epa'e po'o le uliuli, a'o le mea mulimuli e na'o le fetu'una'ia o le tau mama o lanu ta'itasi. O le taunuuga o se seti sili atu ona atoatoa o lanu, e pei ona faʻaalia i lenei CodePen demo .
O a matou tint-color()
ma shade-color()
galuega e faʻaoga mix()
faʻatasi ma a matou $theme-color-interval
fesuiaiga, lea e faʻamaonia ai le tau o le pasene mo lanu fefiloi taitasi matou te gaosia. Va'ai le scss/_functions.scss
ma scss/_variables.scss
faila mo le fa'ailoga puna atoa.
Fa'afanua Sass lanu
O faila Sass fa'apogai a Bootstrap e aofia ai fa'afanua se tolu e fesoasoani ia te oe vave ma faigofie ona fa'asolo i luga o se lisi o lanu ma o latou tulaga hex.
$colors
o lo'o lisi uma ai a matou fa'avae (500
) lanu$theme-colors
lisi uma igoa autu lanu lanu (fa'aali i lalo)$grays
lisi uma lanu ma lanu efuefu
I totonu scss/_variables.scss
, o le ae mauaina suiga lanu a Bootstrap ma le faafanua Sass. O se fa'ata'ita'iga lea o le $colors
fa'afanua 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
);
Fa'aopoopo, ave'ese, pe sui fa'atatau i totonu o le fa'afanua e fa'afou ai pe fa'apefea ona fa'aoga i le tele o isi vaega. Ae paga lea i le taimi nei, e le o vaega uma e faʻaaogaina lenei faʻafanua Sass. O faʻamatalaga i le lumanaʻi o le a taumafai e faʻaleleia lenei mea. Seia o'o i lena taimi, fuafua i le fa'aogaina o ${color}
fesuiaiga ma lenei fa'afanua Sass.
Faataitaiga
O le auala lenei e mafai ai ona e faʻaogaina nei mea i lau Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
O lo'o avanoa fo'i vasega fa'aoga lanu ma tuacolor
mo le fa'atulagaina ma background-color
le fa'aogaina o 500
fa'ailoga lanu.