Sass
Sebenzisa umthombo wethu weefayile zeSass ukuthatha ithuba lokuguquguquka, iimephu, imixube, kunye nemisebenzi ukukunceda ukuba wakhe ngokukhawuleza kwaye wenze iprojekthi yakho ibe yeyakho.
Sebenzisa umthombo wethu weefayile zeSass ukuthatha ithuba lokuguquguquka, iimephu, imixube, kunye nokunye.
Ubume befayile
Nanini na kunokwenzeka, kunqanda ukulungisa iifayile ezingundoqo zeBootstrap. KwiSass, oko kuthetha ukwenza elakho iphepha lesimbo elingenisa ngaphandle iBootstrap ukuze ukwazi ukuyilungisa kwaye uyandise. Ucinga ukuba usebenzisa umphathi wephakheji njenge-npm, uya kuba nesakhiwo sefayile esijongeka ngolu hlobo:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Ukuba ukhuphele iifayile zethu zemvelaphi kwaye awusebenzisi umphathi wepakethe, uya kufuna ukuseta ngesandla into efana neso sakhiwo, ugcine iifayile zemvelaphi yeBootstrap zahlukile kweyakho.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Ukungenisa elizweni
Kweyakho custom.scss
, uya kungenisa iifayile zeSass zomthombo weBootstrap. Uneendlela ezimbini ongakhetha kuzo: bandakanya yonke iBootstrap, okanye khetha iindawo ozifunayo. Siyayikhuthaza le yokugqibela, nangona sisazi ukuba kukho iimfuno kunye nokuxhomekeka kumacandelo ethu. Kananjalo kuya kufuneka ubandakanye iJavaScript yeeplagi zethu.
// Custom.scss
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. Add additional custom code here
Ngolu seto lusendaweni, ungaqala ukulungisa naziphi na izinto eziguquguqukayo zeSass kunye neemephu kweyakho custom.scss
. Ungaqalisa kwakhona ukongeza iinxalenye zeBootstrap phantsi // Optional
kwecandelo njengoko kufuneka. Sicebisa ukuba usebenzise isitaki esipheleleyo sokungenisa bootstrap.scss
kwifayile yethu njengendawo yakho yokuqala.
Ukungagqibeki okuguquguqukayo
Yonke into eguquguqukayo ye-Sass kwi-Bootstrap ibandakanya !default
iflegi ekuvumela ukuba ubhale ngaphezulu ixabiso elingagqibekanga le-Sass yakho ngaphandle kokuguqula ikhowudi yemvelaphi ye-Bootstrap. Khuphela kwaye uncamathisele izinto eziguquguqukayo njengoko kufuneka, uguqule amaxabiso azo, kwaye ususe !default
iflegi. Ukuba uguqulo sele lwabelwe, ngoko aluzukwabelwa kwakhona ngamaxabiso angagqibekanga kwiBootstrap.
Uya kufumana uluhlu olupheleleyo lweenguqu zeBootstrap kwi scss/_variables.scss
. Ezinye iinguqu zisetwe ku null
, ezi ziguquguqukayo azikhuphi ipropati ngaphandle kokuba zibhalwe ngaphezulu kuqwalaselo lwakho.
Ugqithiso oluguquguqukayo kufuneka luze emva kokuba imisebenzi yethu ithengisiwe kumazwe angaphandle, kodwa phambi kokuphuma kwamanye amazwe.
Nanku umzekelo otshintsha background-color
kunye color
neyokurhweba <body>
ngaphandle kunye nokuqulunqa i-Bootstrap nge-npm:
// Required
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Phinda njengoko kuyimfuneko kuyo nayiphi na inguqu kwiBootstrap, kuquka iinketho zehlabathi ezingezantsi.
Iimephu kunye neelophu
I-Bootstrap ibandakanya iimephu ezimbalwa ze-Sass, izibini zexabiso eziphambili ezenza kube lula ukuvelisa iintsapho ze-CSS ehambelanayo. Sisebenzisa iimephu zakwaSass kwimibala yethu, iindawo zokuqhawula igridi, nokunye. Kanye njengezinto eziguquguqukayo ze-Sass, zonke iimephu ze-Sass zibandakanya !default
iflegi kwaye zinokubhalwa ngaphezulu kwaye zandiswe.
Ezinye zeemephu zethu zakwaSass zidityaniswa zibe zingenanto ngokungagqibekanga. Oku kwenzelwa ukuvumela ukwandiswa lula kwemephu ye-Sass enikiweyo, kodwa kuza ngexabiso lokwenza ukususa izinto kwimephu kube nzima ngakumbi.
Guqula imephu
Zonke iinguqu $theme-colors
kwimephu zichazwa njengeziguquguquko ezizimeleyo. Ukuguqula umbala osele ukhona $theme-colors
kwimephu yethu, yongeza oku kulandelayo kwifayile yakho yesiko leSass:
$primary: #0074d9;
$danger: #ff4136;
Kamva, ezi ziguquguqukayo zisetwe $theme-colors
kwimephu yeBootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Yongeza kwimephu
Yongeza imibala emitsha kwi- $theme-colors
, okanye nayiphi na enye imephu, ngokwenza imephu entsha ye-Sass kunye namaxabiso akho kwaye uyidibanise nemephu yoqobo. Kule meko, siyakwenza imaphu entsha $custom-colors
kwaye siyidibanise ne $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Susa kwimephu
Ukususa imibala kwi- $theme-colors
, okanye nayiphi na enye imephu, sebenzisa map-remove
. Qaphela ukuba kufuneka uyifake phakathi kweemfuno zethu kunye nokhetho:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Izitshixo ezifunekayo
I-Bootstrap ithatha ubukho bezitshixo ezithile ngaphakathi kweemephu ze-Sass njengoko besizisebenzisa kwaye sizandise ngokwethu. Njengoko ulungiselela iimephu ezibandakanyiweyo, ungadibana neempazamo apho kusetyenziswa isitshixo semephu ye-Sass ethile.
Umzekelo, sisebenzisa i- primary
, success
kunye danger
nezitshixo ezisuka $theme-colors
kumakhonkco, amaqhosha, kunye nefom yesimo. Ukutshintsha amaxabiso ezi zitshixo kufuneka kungabikho miba, kodwa ukuwasusa kunokubangela imiba yokuhlanganiswa kwe-Sass. Kwezi meko, kuya kufuneka uguqule ikhowudi ye-Sass esebenzisa loo maxabiso.
Imisebenzi
Imibala
Ecaleni kweemephu ze-Sass esinazo, imibala yomxholo isenokusetyenziswa njengezinto eziguquguqukayo ezizimeleyo, njenge $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Ungayikhanyisa okanye wenze mnyama imibala ngeeBootstrap tint-color()
kunye shade-color()
nemisebenzi. Le misebenzi iya kudibanisa imibala emnyama okanye emhlophe, ngokungafaniyo nenzalelwane yakwaSass lighten()
kunye darken()
nemisebenzi eya kutshintsha ukukhanya ngesixa esimiselweyo, esisoloko singakhokelela kwisiphumo esifunwayo.
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
Ngokwenza, ungabiza umsebenzi kwaye uphumelele kumbala kunye neeparamitha zobunzima.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Umahluko wombala
Ukuze kuhlangatyezwane nemigangatho yokufikeleleka kwe -WCAG 2.0 yokuchasana kombala , ababhali kufuneka banike umlinganiselo wokuchasana ubuncinane we-4.5:1 , ngaphandle kwezinto ezimbalwa kakhulu.
Umsebenzi owongezelelweyo esiwufakayo kwiBootstrap ngumsebenzi wokuchasa umbala, color-contrast
. Isebenzisa i- WCAG 2.0 ialgorithm yokubala imingcelele yokwahluka ngokusekelwe kwikhanyiso ehambelanayo kwindawo sRGB
yombala ukubuyisela ngokuzenzekelayo ukukhanya ( #fff
), mnyama ( #212529
) okanye kumnyama ( #000
) umbala wokuchasanisa ngokusekelwe kumbala wesiseko oxeliweyo. Lo msebenzi uluncedo kakhulu kwimixube okanye iilophu apho uvelisa iiklasi ezininzi.
Umzekelo, ukuvelisa iiwotshi zemibala $theme-colors
kwimephu yethu:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Ingasetyenziselwa iimfuno zokuthelekisa enye:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Ungaphinda uchaze umbala osisiseko ngemisebenzi yethu yemephu yombala:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Phuma kwi-SVG
Sisebenzisa escape-svg
umsebenzi ukubaleka <
, >
kunye #
neempawu zeSVG imifanekiso yangasemva. Xa usebenzisa escape-svg
umsebenzi, ii-URL zedatha kufuneka zicatshulwe.
Yongeza kwaye uthabathe imisebenzi
Sisebenzisa i add
kunye subtract
nemisebenzi ukusonga umsebenzi weCSS calc
. Eyona njongo yale misebenzi kukuphepha iimpazamo xa ixabiso elithi "unitless" ligqithiselwa 0
kwintetho calc
. Amabinzana afana nala calc(10px - 0)
aya kubuyisela imposiso kuzo zonke iibhrawuza, nangona ichanekile ngokwezibalo.
Umzekelo apho i-calc isemthethweni:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}
Umzekelo apho i-calc ingasebenziyo:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}
Imixube
Uluhlu lwethu scss/mixins/
lunetoni yemixube enika amandla iindawo zeBootstrap kwaye inokusetyenziswa kuyo yonke iprojekthi yakho.
Izikimu zemibala
I-shorthand mixin prefers-color-scheme
yombuzo wemidiya iyafumaneka ngenkxaso light
, dark
, kunye nezicwangciso zemibala yesiko.
@mixin color-scheme($name) {
@media (prefers-color-scheme: #{$name}) {
@content;
}
}
.custom-element {
@include color-scheme(dark) {
// Insert dark mode styles here
}
@include color-scheme(custom-named-scheme) {
// Insert custom color scheme styles here
}
}