Muhlovo
Bootstrap yi seketeriwa hi fambiselo ro anama ra mihlovo leri thyakisaka switayele swa hina ni swiphemu. Leswi swi endla leswaku ku va na ku cinca loku heleleke swinene na ku engeteriwa ka phurojeke yihi na yihi.
Mihlovo ya nhloko-mhaka
Hi tirhisa ntlawa lowutsongo wa mihlovo hinkwayo ku endla phalete ya mihlovo leyitsongo yo tumbuluxa swikimi swa mihlovo, leyi tlhelaka yi kumeka tanihi swilo leswi cinca-cincaka swa Sass na mepe wa Sass eka scss/_variables.scss
fayili ya Bootstrap.
Mihlovo leyi hinkwayo yi kumeka tanihi mepe wa Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Languta mimepe ya hina ya Sass na ti loops docs ku kuma ndlela yo cinca mihlovo leyi.
Mihlovo hinkwayo
Mihlovo hinkwayo ya Bootstrap yi kumeka tanihi swilo leswi cinca-cincaka swa Sass na mepe wa Sass eka scss/_variables.scss
fayili. Ku papalata ku engeteleka ka vukulu bya tifayela, a hi endli titlilasi ta matsalwa kumbe ta mihlovo ya le ndzhaku eka xin’wana ni xin’wana xa swilo leswi cinca-cincaka. Ematshan’weni ya sweswo, hi hlawula ntlawa lowutsongo wa mihlovo leyi ya phalete ya nhloko-mhaka .
Tiyiseka leswaku u languta mpimo wa ku hambana loko u ri karhi u endla leswaku mihlovo yi va leyi u yi lavaka. Hilaha swi kombisiweke hakona laha hansi, hi engetele swipimelo swinharhu swa ku hambana eka yin’wana ni yin’wana ya mihlovo leyikulu—yin’wana ya mihlovo ya sweswi ya swatch, yin’wana ya ku lwisana ni yo basa ni yin’wana ya ku lwisana ni ya ntima.
Tinhlamuselo eka Sass
Sass a yi nge swi koti ku tumbuluxa swilo leswi cinca-cincaka hi ndlela ya nongonoko, hikwalaho hi endle swilo leswi cinca-cincaka hi voko eka tint yin’wana ni yin’wana ni ndzhuti hi hexe. Hi boxa ntikelo wa ndhawu ya le xikarhi (xikombiso, $blue-500
) naswona hi tirhisa mintirho ya mihlovo ya ntolovelo ku tint (ku voninga) kumbe ku endla ndzhuti (ku endla ntima) mihlovo ya hina hi ku tirhisa mix()
ntirho wa mihlovo wa Sass.
Ku tirhisa mix()
a swi fani na lighten()
na darken()
—leyo sungula yi hlanganisa muvala lowu boxiweke ni wo basa kumbe wa ntima, kasi ya vumbirhi yi lulamisa ntsena ntikelo wa ku olova ka muvala wun’wana ni wun’wana. Vuyelo bya kona i nxaxamelo lowu heleleke swinene wa mihlovo, hilaha swi kombisiweke hakona eka demo leyi ya CodePen .
Mintirho ya hina tint-color()
na shade-color()
yi tirhisa mix()
etlhelo ka $theme-color-interval
xihlawulekisi xa hina, lexi hlamuselaka ntikelo wa tiphesente ta magoza eka muvala wun’wana na wun’wana lowu pfanganisiweke lowu hi wu humesaka. Vona tifayela ta scss/_functions.scss
na scss/_variables.scss
ku kuma khodi ya xihlovo leyi heleleke.
Mihlovo ya mimepe ya Sass
Tifayili ta Sass ta xihlovo xa Bootstrap ti katsa mimepe yinharhu ku ku pfuna ku hatlisa no olova ku rhendzeleka ehenhla ka nxaxamelo wa mihlovo na mimpimo ya yona ya hex.
$colors
yi xaxameta mihlovo hinkwayo ya hina ya xisekelo (500
) leyi kumekaka$theme-colors
yi xaxameta mihlovo hinkwayo ya nhlokomhaka leyi thyiweke mavito ya nhlamuselo (yi kombisiwile laha hansi) .$grays
yi xaxameta tints hinkwato na tinxaka ta grey
Endzeni ka scss/_variables.scss
, u ta kuma swilo leswi cinca-cincaka swa mihlovo ya Bootstrap ni mepe wa Sass. Hi lexi xikombiso xa $colors
mepe wa 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
);
Engetela, susa kumbe ku cinca mimpimo endzeni ka mepe ku pfuxeta ndlela leyi yi tirhisiwaka ha yona eka swiphemu swin’wana swo tala. Khombo ra kona eka nkarhi lowu, a hi xiphemu xin’wana na xin’wana lexi tirhisaka mepe lowu wa Sass. Swilo leswi pfuxetiweke swa nkarhi lowu taka swi ta lwela ku antswisa eka leswi. Ku fikela kwalaho, pulana ku tirhisa ${color}
swilo leswi cinca-cincaka na mepe lowu wa Sass.
Xikombiso
Hi leyi ndlela leyi u nga tirhisaka leswi ha yona eka Sass ya wena:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Titlilasi ta vukorhokeri bya mihlovo na le ndzhaku na tona ta kumeka ku veka color
na background-color
ku tirhisa 500
mimpimo ya mihlovo.
Ku tumbuluxa switirhisiwa swa vukorhokeri
Ku engeteriwe eka v5.1.0
Bootstrap a yi katsi color
na background-color
switirhisiwa swa xihlawulekisi xin’wana na xin’wana xa muvala, kambe u nga tumbuluxa leswi hi wexe hi API ya hina ya vukorhokeri na mimepe ya hina leyi andlariweke ya Sass leyi engeteriweke eka v5.1.0.
- Ku sungula, tiyisisa leswaku u nghenise mintirho ya hina, swilo leswi cinca-cincaka, mixins, na switirhisiwa.
- Tirhisa
map-merge-multiple()
ntirho wa hina ku hatlisa u hlanganisa mimepe yo tala ya Sass swin’we eka mepe lowuntshwa. - Hlanganisa mepe lowu wuntshwa lowu hlanganisiweke ku andlala vukorhokeri byihi na byihi hi
{color}-{level}
vito ra tlilasi.
Hi lexi xikombiso lexi humesaka switirhisiwa swa mihlovo ya matsalwa (xikombiso, .text-purple-500
) hi ku tirhisa magoza lama nga laha henhla.
@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";
Leswi swi ta humesa .text-{color}-{level}
switirhisiwa leswintshwa eka muvala wun’wana na wun’wana na xiyimo. U nga endla leswi fanaka eka vukorhokeri byin’wana ni byin’wana ni nhundzu na swona.