Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
Check
in English

Sass

Kasutage meie Sassi lähtefaile, et kasutada ära muutujaid, kaarte, segusid ja funktsioone, mis aitavad teil projekti kiiremini üles ehitada ja kohandada.

Sellel lehel

Kasutage meie Sassi lähtefaile, et kasutada ära muutujaid, kaarte, miksine ja palju muud.

Faili struktuur

Võimaluse korral vältige Bootstrapi põhifailide muutmist. Sassi jaoks tähendab see oma stiilitabeli loomist, mis impordib Bootstrapi, et saaksite seda muuta ja laiendada. Eeldades, et kasutate paketihaldurit nagu npm, on teil failistruktuur, mis näeb välja järgmine:

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

Kui olete meie lähtefailid alla laadinud ja ei kasuta paketihaldurit, soovite käsitsi luua midagi sarnast selle struktuuriga, hoides Bootstrapi lähtefailid enda omadest eraldi.

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

Importimine

Saate custom.scssimportida Bootstrapi Sassi lähtefailid. Teil on kaks võimalust: kaasata kogu Bootstrap või valida vajalikud osad. Soovitame viimast, kuigi pidage meeles, et meie komponentidel on teatud nõuded ja sõltuvused. Samuti peate meie pistikprogrammide jaoks lisama JavaScripti.

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

Kui see seadistus on paigas, saate hakata muutma mis tahes Sassi muutujaid ja kaarte oma custom.scss. // OptionalVajadusel saate jaotise alla hakata lisama ka Bootstrapi osi . Soovitame bootstrap.scsslähtepunktina kasutada meie faili täielikku impordivirna.

Muutuvad vaikesätted

Iga Bootstrapi Sassi muutuja sisaldab !defaultlippu, mis võimaldab teil alistada muutuja vaikeväärtuse oma Sassis ilma Bootstrapi lähtekoodi muutmata. Vajadusel kopeerige ja kleepige muutujad, muutke nende väärtusi ja eemaldage !defaultlipp. Kui muutuja on juba määratud, ei määrata seda Bootstrapi vaikeväärtuste alusel uuesti.

Bootstrapi muutujate täieliku loendi leiate scss/_variables.scss. Mõned muutujad on seatud väärtusele null, need muutujad ei väljasta atribuuti, välja arvatud juhul, kui need on teie konfiguratsioonis alistatud.

Muutujate alistamised peavad tulema pärast meie funktsioonide importimist, kuid enne ülejäänud importimist.

Siin on näide, mis muudab Bootstrapi importimisel background-colorja kompileerimisel npm-i kaudu ja colorjaoks :<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

Korrake seda vastavalt vajadusele mis tahes Bootstrapi muutuja puhul, sealhulgas allolevate globaalsete valikute puhul.

Alustage Bootstrapiga npm-i kaudu meie stardiprojektiga! Minge mallide hoidlasse twbs/bootstrap-npm-starter , et näha, kuidas Bootstrapi oma npm-projektis luua ja kohandada. Sisaldab Sassi kompilaatorit, Autoprefixerit, Stylelinti, PurgeCSS-i ja Bootstrapi ikoone.

Kaardid ja silmused

Bootstrap sisaldab käputäis Sassi kaarte, võtmeväärtuste paare, mis hõlbustavad seotud CSS-i perekondade loomist. Kasutame oma värvide, ruudustiku murdepunktide ja muu jaoks Sassi kaarte. Nii nagu Sassi muutujad, sisaldavad kõik Sassi kaardid !defaultlippu ning neid saab tühistada ja laiendada.

Mõned meie Sassi kaardid liidetakse vaikimisi tühjaks. Seda tehakse selleks, et võimaldada antud Sassi kaarti hõlpsasti laiendada, kuid see muudab üksuste kaardilt eemaldamise pisut keerulisemaks.

Muuda kaarti

Kõik $theme-colorskaardil olevad muutujad on määratletud eraldiseisvate muutujatena. Meie $theme-colorskaardil olemasoleva värvi muutmiseks lisage oma kohandatud Sassi failile järgmine:

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

Hiljem määratakse need muutujad Bootstrapi $theme-colorskaardil:

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

Lisa kaardile

Lisage $theme-colorskaardile või mõnele muule kaardile uusi värve, luues oma kohandatud väärtustega uue Sassi kaardi ja liites selle algse kaardiga. Sel juhul loome uue $custom-colorskaardi ja liidame selle kaardiga $theme-colors.

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

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

Eemalda kaardilt

Värvide eemaldamiseks $theme-colorskaardilt või muult kaardilt kasutage map-remove. Pidage meeles, et peate sisestama$theme-colors meie nõuete vahele vahetult pärast selle määratlust variablesja enne selle kasutamist 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

Vajalikud võtmed

Bootstrap eeldab teatud võtmete olemasolu Sassi kaartides, nagu me neid ise kasutasime ja laiendasime. Kaasasolevate kaartide kohandamisel võite ilmneda tõrkeid, kui kasutatakse konkreetset Sassi kaardi võtit.

Näiteks kasutame linkide primary, nuppude successja vormi olekute jaoks klahve , ja danger. $theme-colorsNende võtmete väärtuste asendamine ei tohiks probleeme tekitada, kuid nende eemaldamine võib põhjustada Sassi kompileerimise probleeme. Sellistel juhtudel peate muutma neid väärtusi kasutavat Sassi koodi.

Funktsioonid

Värvid

Meil olevate Sassi kaartide kõrval saab teemavärve kasutada ka eraldiseisvate muutujatena, näiteks $primary.

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

tint-color()Bootstrapi ja shade-color()funktsioonide abil saate värve heledamaks või tumedamaks muuta . Need funktsioonid segavad värve musta või valgega, erinevalt Sassi omast lighten()ja darken()funktsioonidest, mis muudavad heledust kindla summa võrra, mis sageli ei anna soovitud efekti.

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

Praktikas kutsuksite funktsiooni välja ja edastaksite värvi- ja kaaluparameetrid.

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

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

Värvi kontrast

Veebisisu juurdepääsetavuse juhiste (WCAG) kontrastinõuete täitmiseks peavad autorid esitama minimaalse teksti värvikontrasti 4,5:1 ja minimaalse mitteteksti värvikontrastsuse 3:1 , välja arvatud väga vähesed erandid.

Selle abistamiseks lisasime color-contrastfunktsiooni Bootstrap. See kasutab suhtelisel heledusel põhinevate kontrastlävede arvutamiseks WCAG kontrastsuse suhte algoritmisRGB värviruumi põhjal, et automaatselt tagastada hele ( #fff), tume ( #212529) või must ( #000) kontrastvärv, mis põhineb määratud põhivärvil. See funktsioon on eriti kasulik mixinide või tsüklite puhul, kus genereerite mitu klassi.

Näiteks meie $theme-colorskaardilt värvinäidiste genereerimiseks tehke järgmist.

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

Seda saab kasutada ka ühekordseks kontrastivajaduseks:

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

Põhivärvi saate määrata ka meie värvikaardi funktsioonidega:

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

Põgenemine SVG-st

Me kasutame escape-svgfunktsiooni põgenemiseks<SVG-taustapiltide jaoks , >ja märkide vältimiseks. #Funktsiooni kasutamisel escape-svgtuleb andme-URI-sid tsiteerida.

Lisa- ja lahutamisfunktsioonid

Kasutame CSS-i funktsiooni mähistamiseks funktsioone addja . Nende funktsioonide esmane eesmärk on vältida vigu, kui a- sse sisestatakse "ühikuta" väärtussubtractcalc0calc . Väljendid nagu calc(10px - 0)tagastavad veateate kõigis brauserites, hoolimata sellest, et need on matemaatiliselt õiged.

Näide, kus arvutus kehtib:

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

Näide, kus arvutus on vale:

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

Segud

Meiescss/mixins/ kataloogis on palju miksine, mis toidavad Bootstrapi osi ja mida saab kasutada ka teie enda projektis.

Värvilahendused

Meediumipäringu stenogramm prefers-color-schemeon saadaval light, dark, ja kohandatud värviskeemide toega.

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