Sass
Kasutage meie Sassi lähtefaile, et kasutada ära muutujaid, kaarte, segusid ja funktsioone, mis aitavad teil projekti kiiremini üles ehitada ja kohandada.
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 alla laadinud meie lähtefailid ja ei kasuta paketihaldurit, soovite käsitsi seadistada 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";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";
// 5. 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/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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.
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 selle sisestama meie nõuete ja valikute vahele:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@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
WCAG 2.0 juurdepääsustandarditele värvikontrastsuse osas peavad autorid esitama kontrastsuse suhte vähemalt 4,5:1 , välja arvatud väga vähesed erandid.
Täiendav funktsioon, mille lisame Bootstrapi, on värvide kontrasti funktsioon color-contrast. See kasutab WCAG 2.0 algoritmi kontrastlävede arvutamiseks värviruumi suhtelise heleduse põhjal, sRGBet 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
SVG-taustapiltide jaoks kasutame escape-svgfunktsiooni <, >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 peamine eesmärk on vältida vigu, kui avaldisesse edastatakse ühikuta väärtus . Väljendid nagu tagastavad veateate kõigis brauserites, hoolimata sellest, et need on matemaatiliselt õiged.subtractcalc0calccalc(10px - 0)
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
Meie scss/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
}
}