Ibara
Bootstrap ishyigikiwe na sisitemu yagutse yamabara insanganyamatsiko yacu nibigize. Ibi bifasha kurushaho kwihindura no kwagura umushinga uwo ariwo wose.
Amabara yibanze
Dukoresha igice cyamabara yose kugirango dukore ibara rito palette yo kubyara amabara, nayo iraboneka nka Sass variable hamwe nikarita ya Sass muri scss/_variables.scss
dosiye ya Bootstrap.
Aya mabara yose arahari nkikarita ya Sass , $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Reba ikarita yacu ya Sass na loop loop kugirango uhindure aya mabara.
Amabara yose
Amabara yose ya Bootstrap arahari nkibihinduka bya Sass n'ikarita ya Sass muri scss/_variables.scss
dosiye. Kugirango twirinde ubunini bwa dosiye, ntabwo dushiraho inyandiko cyangwa ibara ryamabara yibyiciro kuri buri gihinduka. Ahubwo, duhitamo igice cyamabara kumutwe palette .
Witondere gukurikirana ibipimo bitandukanye nkuko uhindura amabara. Nkuko bigaragara hano hepfo, twongeyeho ibipimo bitatu bitandukanye kuri buri bara ryingenzi - rimwe kumabara ya swatch y'ubu, imwe irwanya umweru, indi irwanya umukara.
Inyandiko kuri Sass
Sass ntishobora gukora programme itanga impinduka, kubwibyo twashizeho intoki zahinduye buri tint kandi igicucu ubwacu. Turerekana agaciro ko hagati (urugero, $blue-500
) kandi dukoresha ibikorwa byamabara yihariye kugirango dusige (koroshya) cyangwa igicucu (umwijima) amabara yacu dukoresheje mix()
imikorere yamabara ya Sass.
Gukoresha mix()
ntabwo bisa na lighten()
na darken()
-ibyambere bivanga ibara ryerekanwe numweru cyangwa umukara, mugihe ibyanyuma bihindura gusa urumuri agaciro ka buri bara. Igisubizo ni suite yuzuye y'amabara, nkuko bigaragara muri iyi CodePen demo .
Imikorere yacu tint-color()
nibikorwa shade-color()
dukoresha mix()
kuruhande $theme-color-interval
rwibihinduka, byerekana intambwe yijanisha ryagaciro kuri buri bara rivanze dukora. Reba scss/_functions.scss
na scss/_variables.scss
dosiye kumasoko yuzuye kode.
Ikarita ya Sass
Inkomoko ya Bootstrap Sass dosiye zirimo amakarita atatu yo kugufasha byihuse kandi byoroshye kurutonde rwamabara nagaciro kayo.
$colors
urutonde rwibintu byose biboneka (500
) amabara$theme-colors
urutonde rwibisobanuro byose byitwa insanganyamatsiko y'amabara (yerekanwe hepfo)$grays
urutonde rw'ibara ryose n'ibicucu by'imvi
Imbere scss/_variables.scss
, uzasangamo ibara rya Bootstrap hamwe namakarita ya Sass. Dore urugero $colors
rw'ikarita ya 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
);
Ongeraho, ukureho, cyangwa uhindure indangagaciro mukarita kugirango uvugurure uko zikoreshwa mubindi bice byinshi. Kubwamahirwe muriki gihe, ntabwo buri kintu cyose gikoresha ikarita ya Sass. Ibihe bizaza bizaharanira kunoza ibi. Kugeza icyo gihe, teganya gukoresha ${color}
impinduka n'iyi karita ya Sass.
Urugero
Dore uko ushobora gukoresha ibi muri Sass yawe:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Ibara ninyuma yibikorwa byingirakamaro nabyo birahari mugushiraho no gukoresha ibara ryagaciro.color
background-color
500
Kubyara ibikorwa byingirakamaro
Wongeyeho muri v5.1.0
Bootstrap ntabwo ikubiyemo color
nibikorwa byingirakamaro background-color
kuri buri bara rihinduka, ariko urashobora kubyara ubwawe hamwe na API yacu yingirakamaro hamwe namakarita yacu yagutse ya Sass yongeyeho muri v5.1.0.
- Gutangira, menya neza ko winjije ibikorwa byacu, impinduka, ivanga, hamwe nibikorwa byingirakamaro.
- Koresha
map-merge-multiple()
imikorere yacu kugirango uhuze byihuse amakarita menshi ya Sass hamwe mukarita nshya. - Huza iyi karita nshya ihuriweho kugirango yongere ibikorwa byose hamwe
{color}-{level}
nizina ryurwego.
Dore urugero rutanga inyandiko yibara ryingirakamaro (urugero, .text-purple-500
) ukoresheje intambwe zavuzwe haruguru.
@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";
Ibi bizabyara .text-{color}-{level}
ibikorwa bishya kuri buri bara nurwego. Urashobora gukora kimwe kubindi bikoresho byingirakamaro hamwe numutungo kimwe.