Àwọ̀
Bootstrap jẹ atilẹyin nipasẹ eto awọ lọpọlọpọ ti o ṣe akori awọn aza ati awọn paati wa. Eyi jẹ ki isọdi pipe diẹ sii ati itẹsiwaju fun eyikeyi iṣẹ akanṣe.
Awọn awọ akori
A lo ipin kan ti gbogbo awọn awọ lati ṣẹda paleti awọ ti o kere fun ṣiṣẹda awọn ero awọ, tun wa bi awọn oniyipada Sass ati maapu Sass kan ninu scss/_variables.scss
faili Bootstrap.
Gbogbo awọn awọ wọnyi wa bi maapu Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Ṣayẹwo awọn maapu Sass wa ati awọn docs loops fun bi o ṣe le yipada awọn awọ wọnyi.
Gbogbo awọn awọ
Gbogbo awọn awọ Bootstrap wa bi awọn oniyipada Sass ati maapu Sass kan ninu scss/_variables.scss
faili. Lati yago fun awọn iwọn faili ti o pọ si, a ko ṣẹda ọrọ tabi awọn kilasi awọ abẹlẹ fun ọkọọkan awọn oniyipada wọnyi. Dipo, a yan ipin kan ti awọn awọ wọnyi fun paleti akori kan .
Rii daju lati ṣe atẹle awọn ipin itansan bi o ṣe n ṣatunṣe awọn awọ. Gẹgẹbi a ti han ni isalẹ, a ti ṣafikun awọn ipin itansan mẹta si ọkọọkan awọn awọ akọkọ-ọkan fun awọn awọ lọwọlọwọ swatch, ọkan lodi si funfun, ati ọkan fun lodi si dudu.
Awọn akọsilẹ lori Sass
Sass ko le ṣe ipilẹṣẹ awọn oniyipada ni eto, nitorinaa a ṣẹda awọn oniyipada pẹlu ọwọ fun gbogbo tint ati iboji ara wa. A pato iye midpoint (fun apẹẹrẹ, $blue-500
) ati lo awọn iṣẹ awọ aṣa lati tint (imọlẹ) tabi iboji (ṣokunkun) awọn awọ wa nipasẹ iṣẹ mix()
awọ Sass.
Lilo mix()
kii ṣe kanna bii lighten()
ati darken()
- iṣaju ṣe idapọ awọ ti a sọ pato pẹlu funfun tabi dudu, lakoko ti igbehin nikan n ṣatunṣe iye ina ti awọ kọọkan. Abajade jẹ suite awọn awọ pipe diẹ sii, bi a ṣe han ninu demo CodePen yii .
Wa tint-color()
ati shade-color()
awọn iṣẹ lo mix()
lẹgbẹẹ $theme-color-interval
oniyipada wa, eyiti o ṣalaye iye ipin ogorun kan fun awọ idapọmọra kọọkan ti a ṣe. Wo scss/_functions.scss
ati scss/_variables.scss
awọn faili fun koodu orisun ni kikun.
Awọn maapu Sass awọ
Awọn faili Sass orisun Bootstrap pẹlu awọn maapu mẹta lati ṣe iranlọwọ fun ọ ni iyara ati irọrun lupu lori atokọ ti awọn awọ ati awọn iye hex wọn.
$colors
ṣe atokọ gbogbo awọn awọ ipilẹ ti o wa (500
).$theme-colors
ṣe atokọ gbogbo awọn awọ akori ti a darukọ ni itumọ-ọrọ (ti o han ni isalẹ)$grays
ṣe akojọ gbogbo awọn tints ati awọn ojiji ti grẹy
Ninu scss/_variables.scss
, iwọ yoo rii awọn oniyipada awọ Bootstrap ati maapu Sass. Eyi ni apẹẹrẹ ti $colors
maapu 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
);
Ṣafikun, yọkuro, tabi ṣatunṣe awọn iye laarin maapu lati ṣe imudojuiwọn bi wọn ṣe nlo ni ọpọlọpọ awọn paati miiran. Laanu ni akoko yii, kii ṣe gbogbo paati lo maapu Sass yii. Awọn imudojuiwọn ọjọ iwaju yoo tiraka lati ni ilọsiwaju lori eyi. Titi di igba naa, gbero lori lilo awọn ${color}
oniyipada ati maapu Sass yii.
Apeere
Eyi ni bii o ṣe le lo awọn wọnyi ninu Sass rẹ:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Awọ ati awọn kilasi IwUlO lẹhin tun wa fun eto color
ati background-color
lilo awọn 500
iye awọ.
Ṣiṣe awọn ohun elo
Fi kun v5.1.0
Bootstrap ko pẹlu color
ati background-color
awọn ohun elo fun gbogbo oniyipada awọ, ṣugbọn o le ṣe ina wọnyi funrararẹ pẹlu API IwUlO wa ati awọn maapu Sass ti o gbooro sii ti a ṣafikun ni v5.1.0.
- Lati bẹrẹ, rii daju pe o ti gbe wọle awọn iṣẹ wa, awọn oniyipada, awọn apopọ, ati awọn ohun elo.
- Lo
map-merge-multiple()
iṣẹ wa lati yara dapọ ọpọlọpọ awọn maapu Sass papọ ni maapu tuntun kan. - Darapọ mọ maapu apapọ tuntun yii lati faagun eyikeyi ohun elo pẹlu
{color}-{level}
orukọ kilasi kan.
Eyi ni apẹẹrẹ ti o ṣe agbejade awọn ohun elo awọ ọrọ (fun apẹẹrẹ, .text-purple-500
) ni lilo awọn igbesẹ loke.
@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 yoo ṣe ina awọn .text-{color}-{level}
ohun elo tuntun fun gbogbo awọ ati ipele. O le ṣe kanna fun eyikeyi ohun elo miiran ati ohun-ini daradara.