Sass
Uporabite naše izvorne datoteke Sass, da izkoristite spremenljivke, zemljevide, miksine in funkcije, ki vam bodo pomagali pri hitrejši gradnji in prilagajanju vašega projekta.
Uporabite naše izvorne datoteke Sass, da izkoristite spremenljivke, zemljevide, mešanice in drugo.
Struktura datoteke
Kadarkoli je mogoče, se izogibajte spreminjanju jedrnih datotek Bootstrapa. Za Sass to pomeni ustvarjanje lastne tabele slogov, ki uvozi Bootstrap, da jo lahko spreminjate in razširite. Ob predpostavki, da uporabljate upravitelja paketov, kot je npm, boste imeli strukturo datoteke, ki je videti takole:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Če ste prenesli naše izvorne datoteke in ne uporabljate upravitelja paketov, boste želeli ročno nastaviti nekaj podobnega tej strukturi, tako da bodo izvorne datoteke Bootstrapa ločene od vaših.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Uvažanje
V svoj custom.scss
, boste uvozili izvorne datoteke Sass Bootstrapa. Imate dve možnosti: vključite ves Bootstrap ali izberite dele, ki jih potrebujete. Spodbujamo slednje, čeprav se zavedajte, da obstajajo nekatere zahteve in odvisnosti med našimi komponentami. Za naše vtičnike boste morali vključiti tudi nekaj JavaScripta.
// 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 to nastavitvijo lahko začnete spreminjati katero koli od spremenljivk in zemljevidov Sass v svojem custom.scss
. Po potrebi lahko začnete tudi dodajati dele Bootstrapa pod // Optional
razdelek. Predlagamo, da bootstrap.scss
kot izhodišče uporabite celoten uvozni sklad iz naše datoteke.
Privzete vrednosti spremenljivk
Vsaka spremenljivka Sass v Bootstrapu vključuje !default
zastavico, ki vam omogoča, da preglasite privzeto vrednost spremenljivke v svojem Sassu brez spreminjanja izvorne kode Bootstrapa. Po potrebi kopirajte in prilepite spremenljivke, spremenite njihove vrednosti in odstranite !default
zastavico. Če je bila spremenljivka že dodeljena, potem ne bo ponovno dodeljena s privzetimi vrednostmi v Bootstrapu.
Celoten seznam spremenljivk Bootstrapa boste našli v scss/_variables.scss
. Nekatere spremenljivke so nastavljene na null
, te spremenljivke ne izpišejo lastnosti, razen če so preglasene v vaši konfiguraciji.
Preglasitve spremenljivk morajo priti po uvozu naših funkcij, vendar pred ostalimi uvozi.
Tukaj je primer, ki spremeni background-color
in color
za <body>
pri uvažanju in prevajanju Bootstrapa prek 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/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Po potrebi ponovite za katero koli spremenljivko v programu Bootstrap, vključno s spodnjimi globalnimi možnostmi.
Zemljevidi in zanke
Bootstrap vključuje peščico zemljevidov Sass, parov ključnih vrednosti, ki olajšajo ustvarjanje družin povezanih CSS. Zemljevide Sass uporabljamo za naše barve, prelomne točke mreže in drugo. Tako kot spremenljivke Sass tudi vse karte Sass vključujejo !default
zastavico in jih je mogoče preglasiti in razširiti.
Nekateri naši zemljevidi Sass so privzeto združeni v prazne. To je storjeno, da se omogoči enostavno širjenje danega zemljevida Sass, vendar je to povezano z nekoliko težjim odstranjevanjem elementov z zemljevida.
Spremeni zemljevid
Vse spremenljivke v $theme-colors
zemljevidu so definirane kot samostojne spremenljivke. Če želite spremeniti obstoječo barvo na našem $theme-colors
zemljevidu, svoji datoteki Sass po meri dodajte naslednje:
$primary: #0074d9;
$danger: #ff4136;
Kasneje so te spremenljivke nastavljene v Bootstrapovem $theme-colors
zemljevidu:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Dodaj na zemljevid
Dodajte nove barve $theme-colors
zemljevidu ali kateremu koli drugemu zemljevidu tako, da ustvarite nov zemljevid Sass z vrednostmi po meri in ga združite z izvirnim zemljevidom. V tem primeru bomo ustvarili nov $custom-colors
zemljevid in ga združili z $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Odstrani z zemljevida
Če želite odstraniti barve iz $theme-colors
ali katerega koli drugega zemljevida, uporabite map-remove
. Zavedajte se, da ga morate vstaviti med naše zahteve in možnosti:
// 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
Zahtevani ključi
Bootstrap predvideva prisotnost nekaterih specifičnih ključev v zemljevidih Sass, kot smo jih uporabljali, in jih sami razširimo. Ko prilagajate vključene zemljevide, lahko naletite na napake, kjer se uporablja določen ključ zemljevida Sass.
Na primer, uporabljamo tipke primary
, success
in za povezave, gumbe in stanja obrazca. Zamenjava vrednosti teh ključev ne bi smela povzročati težav, vendar lahko njihova odstranitev povzroči težave pri prevajanju Sass. V teh primerih boste morali spremeniti kodo Sass, ki uporablja te vrednosti.danger
$theme-colors
Funkcije
Barve
Poleg zemljevidov Sass, ki jih imamo, se lahko barve tem uporabljajo tudi kot samostojne spremenljivke, kot je $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
tint-color()
Z Bootstrapom in shade-color()
funkcijami lahko posvetlite ali potemnite barve . Te funkcije bodo mešale barve s črno ali belo, za razliko od Sassovih izvornih lighten()
in darken()
funkcij, ki bodo spremenile svetlost za določeno količino, kar pogosto ne vodi do želenega učinka.
// 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));
}
V praksi bi poklicali funkcijo in ji posredovali parametre barve in teže.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Barvni kontrast
Da bi izpolnili standarde dostopnosti WCAG 2.0 za barvni kontrast , morajo avtorji zagotoviti kontrastno razmerje vsaj 4,5:1 , z zelo redkimi izjemami.
Dodatna funkcija, ki jo vključujemo v Bootstrap, je funkcija barvnega kontrasta, color-contrast
. Uporablja algoritem WCAG 2.0 za izračun kontrastnih pragov na podlagi relativne svetilnosti v barvnem prostoru sRGB
za samodejno vrnitev svetle ( #fff
), temne ( #212529
) ali črne ( #000
) kontrastne barve na podlagi podane osnovne barve. Ta funkcija je še posebej uporabna za miksine ali zanke, kjer ustvarjate več razredov.
Na primer, za ustvarjanje barvnih vzorcev iz našega $theme-colors
zemljevida:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Uporablja se lahko tudi za enkratne kontrastne potrebe:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Določite lahko tudi osnovno barvo z našimi funkcijami barvne karte:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Escape SVG
escape-svg
Funkcijo uporabljamo za ubežanje <
znakov >
in #
za slike ozadja SVG. Pri uporabi escape-svg
funkcije morajo biti podatkovni URI-ji navedeni v narekovajih.
Funkciji seštevanja in odštevanja
Funkciji add
in uporabljamo subtract
za zavijanje funkcije CSS calc
. Primarni namen teh funkcij je preprečiti napake, ko 0
se v izraz posreduje vrednost »brez enote« calc
. Izrazi, kot calc(10px - 0)
je, vrnejo napako v vseh brskalnikih, čeprav so matematično pravilni.
Primer, ko je izračun veljaven:
$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);
}
Primer, ko je izračun neveljaven:
$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/
imenik vsebuje ogromno miksinov, ki poganjajo dele Bootstrapa in jih je mogoče uporabiti tudi v vašem projektu.
Barvne sheme
Skrajšan mixin za prefers-color-scheme
medijsko poizvedbo je na voljo s podporo za light
, dark
in barvne sheme po meri.
@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
}
}