Lanu
O le Bootstrap e lagolagoina e se faiga lanu tele e faʻaulu ai a tatou sitaili ma vaega. Ole mea lea e mafai ai ona sili atu le fa'avasegaina ma le fa'aopoopoga 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'aaogaina mix()
e le tutusa ma le lighten()
ma darken()
—o le mea muamua e fa'afefiloi le lanu fa'amaonia 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'aogaina i le tele o isi vaega. Ae paga lea i le taimi nei, e le o vaega uma e faʻaogaina 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.
Fausia mea aoga
Fa'aopoopo i le v5.1.0
Bootstrap e le o aofia ai color
ma background-color
mea aoga mo fesuiaiga lanu uma, ae e mafai ona e faia oe lava ia i la matou aoga API ma a matou faafanua lautele Sass faaopoopo i le v5.1.0.
- Ina ia amata, ia mautinoa ua e faaulufale mai a matou galuega, fesuiaiga, mixins, ma mea aoga.
- Fa'aoga la matou
map-merge-multiple()
galuega e vave tu'u fa'atasi ai fa'afanua Sass se tele i se fa'afanua fou. - Fa'atasi le fa'afanua fou tu'ufa'atasi e fa'alautele so'o se mea aoga ma se
{color}-{level}
igoa o le vasega.
O se fa'ata'ita'iga lea e fa'atupuina ai fa'aoga lanu o tusitusiga (fa'ata'ita'iga, .text-purple-500
) fa'aaoga laasaga o lo'o i luga.
@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";
O lenei mea o le a fa'atupuina ai fa'aoga fou .text-{color}-{level}
mo lanu ma tulaga uma. E mafai ona e faia le mea lava e tasi mo soʻo se isi lava mea aoga ma meatotino.