Sass
Koristite naše izvorne Sass datoteke da biste iskoristili prednosti varijabli, mapa, miksa i funkcija koje će vam pomoći da napravite bržu i prilagodite svoj projekt.
Iskoristite naše izvorne Sass datoteke da iskoristite prednosti varijabli, mapa, miksa i još mnogo toga.
Struktura fajla
Kad god je moguće, izbjegavajte modificiranje osnovnih datoteka Bootstrapa. Za Sass, to znači kreiranje vlastite tablice stilova koja uvozi Bootstrap tako da ga možete modificirati i proširiti. Pod pretpostavkom da koristite upravitelj paketa kao što je npm, imat ćete strukturu datoteke koja izgleda ovako:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Ako ste preuzeli naše izvorne datoteke i ne koristite upravitelj paketa, poželjet ćete ručno postaviti nešto slično toj strukturi, držeći izvorne datoteke Bootstrapa odvojene od vaših.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Uvoz
U vaš custom.scss
, uvest ćete izvorne Sass datoteke Bootstrapa. Imate dvije opcije: uključite cijeli Bootstrap ili odaberite dijelove koji su vam potrebni. Podstičemo ovo drugo, iako imajte na umu da postoje neki zahtjevi i ovisnosti među našim komponentama. Također ćete morati uključiti neki JavaScript za naše dodatke.
// 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
S tim podešavanjem možete početi mijenjati bilo koju od Sass varijabli i mapa u vašem custom.scss
. Također možete početi da dodajete dijelove Bootstrapa ispod // Optional
odjeljka po potrebi. Predlažemo da koristite kompletan stog uvoza iz naše bootstrap.scss
datoteke kao početnu tačku.
Varijabilne zadane postavke
Svaka Sass varijabla u Bootstrapu uključuje !default
oznaku koja vam omogućava da nadjačate zadanu vrijednost varijable u svom vlastitom Sass-u bez modifikacije izvornog koda Bootstrapa. Kopirajte i zalijepite varijable po potrebi, izmijenite njihove vrijednosti i uklonite !default
oznaku. Ako je varijabla već dodijeljena, neće biti ponovo dodijeljena prema zadanim vrijednostima u Bootstrapu.
Naći ćete kompletnu listu varijabli Bootstrapa u scss/_variables.scss
. Neke varijable su postavljene na null
, te varijable ne daju svojstvo osim ako nisu nadjačane u vašoj konfiguraciji.
Zaobilaženja varijabli moraju doći nakon uvoza naših funkcija, ali prije ostatka uvoza.
Evo primjera koji mijenja background-color
i color
za <body>
pri uvozu i kompajliranju Bootstrapa putem npm-a:
// 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
Ponovite po potrebi za bilo koju varijablu u Bootstrapu, uključujući globalne opcije ispod.
Mape i petlje
Bootstrap uključuje pregršt Sass mapa, parova ključnih vrijednosti koji olakšavaju generiranje porodica povezanih CSS-a. Koristimo Sass mape za naše boje, tačke prekida mreže i još mnogo toga. Baš kao i Sass varijable, sve Sass mape uključuju !default
zastavu i mogu se nadjačati i proširiti.
Neke od naših Sass mapa su standardno spojene u prazne. Ovo je učinjeno kako bi se omogućilo jednostavno proširenje date Sass mape, ali dolazi po cijenu da uklanjanje stavki sa mape bude malo teže.
Izmijenite mapu
Sve varijable u $theme-colors
mapi su definirane kao samostalne varijable. Da biste izmijenili postojeću boju na našoj $theme-colors
mapi, dodajte sljedeće u svoju prilagođenu Sass datoteku:
$primary: #0074d9;
$danger: #ff4136;
Kasnije se ove varijable postavljaju u Bootstrap $theme-colors
mapu:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Dodaj na mapu
Dodajte nove boje na $theme-colors
, ili bilo koju drugu kartu, kreiranjem nove Sass karte s vašim prilagođenim vrijednostima i spajanjem s originalnom mapom. U ovom slučaju, kreirat ćemo novu $custom-colors
kartu i spojiti je sa $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Ukloni sa mape
Za uklanjanje boja sa $theme-colors
, ili bilo koje druge karte, koristite map-remove
. Imajte na umu da ga morate umetnuti između naših zahtjeva i opcija:
// 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
Potrebni ključevi
Bootstrap pretpostavlja prisustvo nekih specifičnih ključeva unutar Sass mapa jer smo ih sami koristili i proširivali. Dok prilagođavate uključene mape, možete naići na greške kada se koristi određeni ključ Sass karte.
Na primjer, koristimo primary
, success
, i danger
tipke from $theme-colors
za veze, dugmad i stanja obrasca. Zamjena vrijednosti ovih ključeva ne bi trebala predstavljati probleme, ali njihovo uklanjanje može uzrokovati probleme sa Sass kompilacijom. U ovim slučajevima, morat ćete izmijeniti Sass kod koji koristi te vrijednosti.
Funkcije
Boje
Pored Sass mapa koje imamo, boje teme se mogu koristiti i kao samostalne varijable, poput $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Možete posvijetliti ili potamniti boje pomoću Bootstrapa tint-color()
i shade-color()
funkcija. Ove funkcije će mešati boje sa crnom ili belom, za razliku od Sass-ovog izvornog lighten()
i darken()
funkcije koje će promeniti osvetljenost za fiksnu količinu, što često ne dovodi do željenog efekta.
// 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));
}
U praksi biste pozvali funkciju i prenijeli parametre boje i težine.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Kontrast boja
Da bi ispunili standarde pristupačnosti WCAG 2.0 za kontrast boja , autori moraju obezbijediti omjer kontrasta od najmanje 4,5:1 , uz vrlo malo izuzetaka.
Dodatna funkcija koju uključujemo u Bootstrap je funkcija kontrasta boja, color-contrast
. Koristi WCAG 2.0 algoritam za izračunavanje pragova kontrasta na osnovu relativnog osvetljenja u sRGB
prostoru boja da automatski vrati svetlu ( #fff
), tamnu ( #212529
) ili crnu ( #000
) kontrastnu boju na osnovu specificirane osnovne boje. Ova funkcija je posebno korisna za miksine ili petlje gdje generišete više klasa.
Na primjer, za generiranje uzoraka boja s naše $theme-colors
karte:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Može se koristiti i za jednokratne potrebe za kontrastom:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Također možete odrediti osnovnu boju pomoću naših funkcija mape boja:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Escape SVG
Koristimo escape-svg
funkciju za izbjegavanje znakova <
, >
i #
za SVG pozadinske slike. Kada koristite escape-svg
funkciju, URI podataka mora biti naveden.
Funkcije sabiranja i oduzimanja
Koristimo add
i subtract
funkcije da omotamo CSS calc
funkciju. Primarna svrha ovih funkcija je izbjegavanje grešaka kada se 0
vrijednost „bez jedinica“ prenese u calc
izraz. Izrazi poput calc(10px - 0)
će vratiti grešku u svim pretraživačima, uprkos tome što su matematički ispravni.
Primjer gdje je izračun valjan:
$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);
}
Primjer gdje je izračun nevažeći:
$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);
}
Mixins
Naš scss/mixins/
direktorij ima gomilu miksina koji napajaju dijelove Bootstrapa i mogu se koristiti iu vašem projektu.
Šeme boja
Dostupan je skraćeni mixin za prefers-color-scheme
medijski upit s podrškom za light
, dark
, i prilagođene sheme boja.
@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
}
}