Ahosuo
Bootstrap no boa denam kɔla nhyehyɛe a ɛtrɛw a ɛde yɛn ntadehyɛ ne nneɛma a ɛwom no asɛmti so. Eyi ma wotumi yɛ nsakrae ne ntrɛwmu a ɛkɔ akyiri ma adwuma biara.
Asɛmti kɔla ahorow
Yɛde kɔla nyinaa subset di dwuma de yɛ kɔla palette ketewa bi a yɛde yɛ kɔla nhyehyɛe, a ɛsan nso wɔ hɔ sɛ Sass variables ne Sass map wɔ Bootstrap scss/_variables.scss
fael no mu.
Saa kɔla ahorow yi nyinaa wɔ hɔ sɛ Sass asase mfonini, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Hwɛ yɛn Sass maps ne loops docs no na woahu sɛnea wobɛsesa saa kɔla ahorow yi.
Kɔla ahorow nyinaa
Bootstrap kɔla nyinaa wɔ hɔ sɛ Sass variables ne Sass map wɔ scss/_variables.scss
fael mu. Sɛnea ɛbɛyɛ a yɛbɛkwati fael akɛse a ɛbɛkɔ soro no, yɛnyɛ nsɛm anaa akyi kɔla adesua ahorow mma saa nsakrae ahorow yi mu biara. Mmom no, yɛpaw saa kɔla ahorow yi fã ketewaa bi ma asɛmti palette .
Hwɛ hu sɛ wobɛhwɛ nneɛma a ɛne ne ho bɔ abira bere a woreyɛ kɔla ahorow no sɛnea wopɛ no. Sɛnea wɔakyerɛ wɔ ase hɔ no, yɛde nsonsonoe ahorow abiɛsa aka kɔla atitiriw no mu biara ho —baako ma swatch no kɔla ahorow a ɛwɔ hɔ mprempren, biako ma fitaa, ne biako ma tuntum.
Nsɛm a wɔakyerɛw afa Sass ho
Sass ntumi nnyɛ programmatically generate variables, enti yɛde nsa yɛɛ variables maa tint ne shade biara yɛn ankasa. Yɛkyerɛ mfinimfini botae (sɛ nhwɛso no, $blue-500
) na yɛde kɔla dwumadi ahorow a wɔahyɛ da ayɛ no di dwuma de yɛ yɛn kɔla ahorow no tint (yɛ hann) anaasɛ yɛde yɛ sunsuma (ma ɛyɛ sum) denam Sass mix()
kɔla dwumadi no so.
Sɛ wode di dwuma mix()
a, ɛnyɛ ade koro lighten()
ne darken()
—kan no de kɔla a wɔakyerɛ no fra fitaa anaa tuntum mu, bere a nea etwa to no sesa kɔla biara bo a ɛyɛ hare nkutoo. Nea efi mu ba ne kɔla ahorow a edi mũ kɛse, sɛnea wɔada no adi wɔ CodePen demo yi mu no .
Yɛn tint-color()
ne shade-color()
dwumadie ahodoɔ no de di dwuma mix()
ka yɛn $theme-color-interval
nsakraeɛ no ho, a ɛkyerɛ anammɔn ɔha mu nkyekyɛmu boɔ ma kɔla biara a wɔadi afra a yɛyɛ. Hwɛ scss/_functions.scss
ne scss/_variables.scss
fael ahorow no na woahu source code no nyinaa.
Kɔla Sass asase mfonini ahorow
Bootstrap no fibea Sass fael ahorow no wɔ map abiɛsa a ɛbɛboa wo ntɛmntɛm na ɛnyɛ den sɛ wobɛbɔ kɔla ahorow ne wɔn hex botae ahorow a wɔahyehyɛ no so.
$colors
kyerɛw yɛn base (500
) kɔla ahorow a ɛwɔ hɔ nyinaa din$theme-colors
kyerɛw asɛmti kɔla ahorow a wɔato din wɔ nkyerɛase mu nyinaa (wɔakyerɛ wɔ ase hɔ) .$grays
kyerɛw tint ne shades a ɛyɛ fitaa nyinaa din
Wɔ scss/_variables.scss
, mu no, wubehu Bootstrap no kɔla nsakrae ne Sass map. $colors
Sass asase mfonini no ho nhwɛso ni:
$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 gyinapɛn ahorow ka ho, yi, anaa sesa wɔ map no mu na ama woatumi ayɛ sɛnea wɔde di dwuma wɔ nneɛma afoforo pii mu no foforo. Awerɛhosɛm ne sɛ saa bere yi, ɛnyɛ component biara na ɛde Sass map yi di dwuma. Daakye nsɛm foforo bɛbɔ mmɔden sɛ ɛbɛma eyi atu mpɔn. Enkosi saa bere no, yɛ nhyehyɛe sɛ wode ${color}
nsakrae ahorow no ne Sass asase mfonini yi bedi dwuma.
Nhwɛsoɔ
Sɛnea wubetumi de eyinom adi dwuma wɔ wo Sass mu ni:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Kɔla ne akyi mfaso adesua ahorow nso wɔ hɔ a wɔde besiesie color
na background-color
wɔde 500
kɔla gyinapɛn ahorow no adi dwuma.
Nneɛma a wɔde di dwuma a wɔde yɛ adwuma
Wɔde aka ho wɔ v5.1.0 mu
Bootstrap nka color
ne background-color
mfasoɔ ma kɔla nsakraeɛ biara, nanso wobɛtumi ayɛ eyinom ankasa denam yɛn mfasoɔ API ne yɛn Sass map a wɔatrɛ mu a wɔde aka ho wɔ v5.1.0 mu.
- Sɛ wopɛ sɛ wohyɛ aseɛ a, hwɛ sɛ wode yɛn dwumadie, nsakraeɛ, mixins, ne utilities no aba.
- Fa yɛn
map-merge-multiple()
dwumadie no di dwuma fa ka Sass map ahodoɔ pii bom ntɛmntɛm wɔ map foforɔ mu. - Fa saa map foforo a wɔaka abom yi bom na fa
{color}-{level}
adesua din trɛw mfaso biara mu.
Nhwɛsoɔ bi a ɛma nsɛm kɔla mfasoɔ (sɛ nhwɛsoɔ, .text-purple-500
) de atifi hɔ anammɔn no di dwuma nie.
@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";
Eyi bɛma wɔanya mfaso foforo .text-{color}-{level}
ama kɔla ne level biara. Wubetumi ayɛ saa ara ama utility ne agyapade foforo biara nso.