Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
Check
in English

Sass

Sebenzisa umthombo wethu weefayile zeSass ukuthatha ithuba lokuguquguquka, iimephu, imixube, kunye nemisebenzi ukukunceda ukuba wakhe ngokukhawuleza kwaye wenze iprojekthi yakho ibe yeyakho.

Kweli phepha

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 zomthombo kwaye awusebenzisi umphathi wepakethe, uya kufuna ukwenza ngesandla into efana neso sakhiwo, ugcine iifayile zomthombo weBootstrap 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";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts 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";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. 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 // Optionalkwecandelo njengoko kufuneka. Sicebisa ukuba usebenzise isitaki esipheleleyo sokungenisa bootstrap.scsskwifayile yethu njengendawo yakho yokuqala.

Ukungagqibeki okuguquguqukayo

Yonke into eguquguqukayo ye-Sass kwi-Bootstrap ibandakanya !defaultiflegi 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 !defaultiflegi. 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-colorkunye colorneyokurhweba <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/maps";
@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.

Qalisa ngeBootstrap nge-npm ngeprojekthi yethu yokuqalisa! Intloko uye kwi- twbs/bootstrap-npm-starter template repository ukubona indlela yokwakha kunye nokwenza ngokwezifiso i-Bootstrap kwiprojekthi yakho ye-npm. Kubandakanya i-Sass compiler, i-Autoprefixer, i-Stylelint, i-PurgeCSS, kunye ne-Icons ze-Bootstrap.

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 !defaultiflegi 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-colorskwimephu zichazwa njengeziguquguquki ezizimeleyo. Ukuguqula umbala osele ukhona $theme-colorskwimephu yethu, yongeza oku kulandelayo kwifayile yakho yesiko leSass:

$primary: #0074d9;
$danger: #ff4136;

Kamva, ezi ziguquguqukayo zisetwe $theme-colorskwimephu yeBootstrap:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Yongeza kwimephu

Yongeza imibala emitsha kwi- $theme-colors, okanye nayiphi na enye imephu, ngokwenza imaphu entsha ye-Sass kunye namaxabiso akho kwaye uyidibanise nemephu yoqobo. Kule meko, siyakwenza imaphu entsha $custom-colorskwaye 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 ufake $theme-colorsphakathi kweemfuno zethu kanye emva kwengcaciso yayo ngaphakathi variablesnaphambi kokusetyenziswa kwayo maps:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 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, successkunye dangernezitshixo ezisuka $theme-colorskumakhonkco, 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 neZikhokelo zokuFikelela koMxholo weWebhu (WCAG) iimfuno zokuthelekisa, ababhali kufuneka banike ubuncinci umahluko wombala wombhalo we-4.5: 1 kunye nombala ongengowombhalo wemibala ye-3: 1 , ngaphandle kokumbalwa kakhulu.

Ukunceda oku, sifake color-contrastumsebenzi kwi-Bootstrap. Isebenzisa i- algorithm yomlinganiselo wokuchasa weWCAG ukubala imilinganiselo yochasaniso esekelwe kwikhanyiso ehambelanayo kwindawo sRGByombala ukubuyisela ngokuzenzekelayo ukukhanya ( #fff), mnyama ( #212529) okanye mnyama ( #000) umahluko wombala ngokusekelwe kumbala wesiseko oxeliweyo. Lo msebenzi uluncedo kakhulu kwimixube okanye iilophu apho uvelisa iiklasi ezininzi.

Umzekelo, ukuvelisa iiwotshi zemibala $theme-colorskwimephu 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-svgumsebenzi ukubaleka <, >kunye #neempawu zeSVG imifanekiso yangasemva. Xa usebenzisa escape-svgumsebenzi, ii-URL zedatha kufuneka zicatshulwe.

Yongeza kwaye uthabathe imisebenzi

Sisebenzisa i addkunye subtractnemisebenzi ukusonga umsebenzi weCSS calc. Eyona njongo yale misebenzi kukuphepha iimpazamo xa ixabiso elithi "unitless" ligqithiselwa 0kwintetho 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-schemeyombuzo 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
  }
}