Sass

Sebenzisa umthombo wethu wamafayela e-Sass ukuze usizakale ngezinto eziguquguqukayo, amamephu, izingxube, nemisebenzi ukukusiza ukuthi wakhe ngokushesha futhi wenze iphrojekthi yakho ngendlela oyifisayo.

Kuleli khasi

Sebenzisa umthombo wethu wamafayela e-Sass ukuze uthathe ithuba lokuhlukahluka, amamephu, imiksi, nokuningi.

Isakhiwo sefayela

Noma nini lapho kunokwenzeka, gwema ukulungisa amafayela ayinhloko e-Bootstrap. Kwa-Sass, lokho kusho ukudala eyakho ishidi lesitayela elingenisa i-Bootstrap ukuze ukwazi ukuyilungisa futhi uyinwebe. Uma ucabanga ukuthi usebenzisa umphathi wephakheji njenge-npm, uzoba nesakhiwo sefayela esibukeka kanje:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Uma ulande amafayela ethu omthombo futhi ungasebenzisi umphathi wephakheji, uzofuna ukwenza mathupha into efana naleso sakhiwo, ugcine amafayela omthombo we-Bootstrap ehlukene kwewakho.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Iyangenisa

Kweyakho custom.scss, uzongenisa amafayela we-Sass womthombo we-Bootstrap. Unezinketho ezimbili: faka yonke i-Bootstrap, noma khetha izingxenye ozidingayo. Sikhuthaza lokhu okwakamuva, nakuba sazi ukuthi kunezimfuneko ezithile nokuncika kuzo zonke izingxenye zethu. Uzodinga futhi ukufaka i-JavaScript yama-plugin ethu.

// 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

Uma lokho kusetha kusendaweni, ungaqala ukulungisa noma yikuphi okuguquguqukayo kwe-Sass namamephu kufayela lakho le- custom.scss. Ungaqala futhi ukwengeza izingxenye ze-Bootstrap ngaphansi // Optionalkwesigaba njengoba kudingeka. Siphakamisa ukuthi usebenzise isitaki sokungenisa esigcwele esivela bootstrap.scsskufayela lethu njengendawo yakho yokuqala.

Okuzenzakalelayo okuguquguqukayo

Konke okuguquguqukayo kwe-Sass ku-Bootstrap kufaka phakathi !defaultifulegi elikuvumela ukuthi ubhale ngaphezulu inani elizenzakalelayo lokuguquguquka ku-Sass yakho ngaphandle kokulungisa ikhodi yomthombo ye-Bootstrap. Kopisha futhi unamathisele okuguquguqukayo njengoba kudingeka, lungisa amanani azo, futhi ususe !defaultifulegi. Uma okuguquguqukayo sekuvele kwabelwe, ngakho-ke ngeke kuphinde kunikezwe amanani azenzakalelayo ku-Bootstrap.

Uzothola uhlu oluphelele lweziguquguquko ze-Bootstrap ku- scss/_variables.scss. Ezinye eziguquguqukayo zisethelwe kokuthi null, lezi ziguquko azikhiphi isici ngaphandle kokuthi zikhishwe ekucushweni kwakho.

Ukukhishwa okuguquguqukayo kufanele kuze ngemva kokuba imisebenzi yethu isingenisiwe, kodwa ngaphambi kokunye okuthengisiwe.

Nasi isibonelo esishintsha i- kanye background-colorneyokuthi lapho ungenisa futhi uhlanganisa i-Bootstrap nge-npm:color<body>

// 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 njengoba kudingekile kunoma yikuphi okuguquguqukayo ku-Bootstrap, kuhlanganise nezinketho zomhlaba jikelele ngezansi.

Qalisa nge-Bootstrap nge-npm ngephrojekthi yethu yokuqala! Hamba ku- twbs/bootstrap-npm-starter template repository ukuze ubone indlela yokwakha nokwenza ngokwezifiso i-Bootstrap kuphrojekthi yakho ye-npm. Kufaka phakathi i-Sass compiler, Autoprefixer, Stylelint, PurgeCSS, nezithonjana ze-Bootstrap.

Amamephu namaluphu

I-Bootstrap ifaka idlanzana lamamephu e-Sass, amapheya enani angukhiye akwenza kube lula ukukhiqiza imindeni ye-CSS ehlobene. Sisebenzisa amamephu e-Sass ngemibala yethu, izindawo zokunqamuka kwegridi, nokuningi. Njengezinto eziguquguqukayo ze-Sass, wonke amamephu akwa-Sass afaka !defaultifulegi futhi angabhalwa phansi futhi andwe.

Amanye amamephu ethu e-Sass ahlanganiswa abe angenalutho ngokuzenzakalelayo. Lokhu kwenzelwa ukuvumela ukunwetshwa okulula kwemephu ye-Sass enikeziwe, kodwa kuza ngezindleko zokwenza ukususa izinto kumephu kube nzima kakhulu.

Lungisa imephu

Konke okuguquguqukayo $theme-colorskumephu kuchazwa njengokuguquguquka okuzimele. Ukuze ulungise umbala okhona $theme-colorskumephu yethu, engeza okulandelayo kufayela lakho langokwezifiso le-Sass:

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

Kamuva, lokhu okuguquguqukayo kusethwe $theme-colorskumephu ye-Bootstrap:

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

Engeza kumephu

Engeza imibala emisha ku- $theme-colors, nanoma iyiphi enye imephu, ngokudala imephu ye-Sass entsha ngamavelu akho angokwezifiso futhi uyihlanganise nemephu yoqobo. Kulokhu, sizodala $custom-colorsimephu entsha futhi siyihlanganise ne- $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Susa kumephu

Ukuze ususe imibala ku- $theme-colors, nanoma iyiphi enye imephu, sebenzisa map-remove. Qaphela ukuthi kufanele ufake $theme-colorsphakathi kwezidingo zethu ngemuva nje kokuchazwa kwayo ngaphakathi variablesnangaphambi kokusetshenziswa kwayo kokuthi 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

Okhiye abadingekayo

I-Bootstrap ithatha ubukhona bokhiye abathile ngaphakathi kwamamephu e-Sass njengoba siwasebenzisile futhi sizinweba thina ngokwethu. Njengoba wenza ngendlela oyifisayo amamephu afakiwe, ungase uhlangabezane namaphutha lapho kusetshenziswa khona ukhiye othile wemephu ye-Sass.

Isibonelo, sisebenzisa i- primary, success, kanye dangernokhiye abavela kuzo $theme-colorsukuze uthole izixhumanisi, izinkinobho, nezimo zefomu. Ukushintsha amanani alaba khiye akumele kuveze izinkinga, kodwa ukuwasusa kungase kubangele izinkinga zokuhlanganisa i-Sass. Kulezi zimo, uzodinga ukushintsha ikhodi ye-Sass esebenzisa lawo manani.

Imisebenzi

Imibala

Eduze kwamamephu e-Sass esinawo, imibala yetimu ingasetshenziswa futhi njengokuguquguquka okuzimele, njenge- $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

Ungakhanyisa noma wenze mnyama imibala nge-Bootstrap tint-color()kanye shade-color()nemisebenzi. Le misebenzi izohlanganisa imibala emnyama noma emhlophe, ngokungafani nomdabu wakwa-Sass lighten()kanye darken()nemisebenzi ezoshintsha ukukhanya ngenani eligxilile, ngokuvamile elingalethi umphumela oyifunayo.

// 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));
}

Empeleni, ungabiza umsebenzi bese udlulisela umbala nemingcele yesisindo.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Ukungafani kombala

Ukuze kuhlangatshezwane nezimfuneko zokuqhathanisa Zemihlahlandlela Yokufinyeleleka Kokuqukethwe Kwewebhu (WCAG) , ababhali kufanele banikeze ubuncane bokungafani kombala wombhalo ongu-4.5:1 kanye nobuncane bokungafani bombala ongewona umbhalo ongu-3:1 , ngaphandle kokuhlukile okumbalwa kakhulu.

Ukusiza ngalokhu, sifake color-contrastumsebenzi ku-Bootstrap. Isebenzisa i- algorithm yesilinganiso sokungafani se-WCAG ekubaleni imikhawulo yokuqhathanisa ngokusekelwe ekukhanyeni okuhlobene esikhaleni sRGBsombala ukuze ibuyisele ngokuzenzakalelayo ukukhanya ( #fff), okumnyama ( #212529) noma okumnyama ( #000) umbala wokungafani ngokusekelwe kumbala wesisekelo oshiwo. Lo msebenzi uwusizo ikakhulukazi kumamiksi noma amaluphu lapho ukhiqiza khona amakilasi amaningi.

Isibonelo, ukwenza ama-swatches ombala $theme-colorskumephu yethu:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

Ingase futhi isetshenziselwe izidingo zokuqhathanisa okukodwa:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Ungaphinda ucacise umbala oyisisekelo ngemisebenzi yethu yemephu yombala:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Escape SVG

Sisebenzisa escape-svgumsebenzi ukubalekela <, >nezinhlamvu #zezithombe zangemuva ze-SVG. Uma usebenzisa escape-svgumsebenzi, ama-URL wedatha kufanele acashunwe.

Engeza futhi Ususe imisebenzi

Sisebenzisa addkanye subtractnemisebenzi ukusonga umsebenzi we-CSS calc. Injongo eyinhloko yale misebenzi iwukugwema amaphutha lapho inani elithi “unitless” 0lidluliselwa calcenkulumweni. Izinkulumo ezifana nalezi calc(10px - 0)zizobuyisela iphutha kuzo zonke iziphequluli, ngaphandle kokuthi zilungile ngokwezibalo.

Isibonelo lapho i-calc isebenza khona:

$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);
}

Isibonelo lapho i-calc ingavumelekile:

$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);
}

Imiksi

Inkomba yethu scss/mixins/inethani lamamiksi anika amandla izingxenye ze-Bootstrap futhi ingasetshenziswa kuyo yonke iphrojekthi yakho.

Izikimu zombala

I-shorthand mixin prefers-color-schemeyombuzo wemidiya iyatholakala ngokusekelwa light, dark, kanye nezikimu zombala ngokwezifiso.

@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
  }
}