Sass
Upotrijebite naše izvorne Sass datoteke kako biste iskoristili prednosti varijabli, mapa, mixina i funkcija koje će vam pomoći da brže gradite i prilagodite svoj projekt.
Upotrijebite naše izvorne Sass datoteke kako biste iskoristili prednosti varijabli, mapa, mixina i još mnogo toga.
Struktura datoteke
Kad god je moguće, izbjegavajte mijenjanje osnovnih datoteka Bootstrapa. Za Sass to znači stvaranje vlastite tablice stilova koja uvozi Bootstrap tako da je možete mijenjati i proširivati. 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, trebali biste ručno postaviti nešto slično toj strukturi, držeći Bootstrapove izvorne datoteke odvojene od svojih.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Uvoz
U svoj custom.scss
, uvest ćete Bootstrapove izvorne Sass datoteke. Imate dvije mogućnosti: uključite cijeli Bootstrap ili odaberite dijelove koji su vam potrebni. Potičemo potonje, iako imajte na umu da postoje neki zahtjevi i ovisnosti među našim komponentama. Također ćete morati uključiti malo JavaScripta 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 postavkama možete početi mijenjati bilo koju od Sass varijabli i mapa u vašem custom.scss
. Također možete početi dodavati dijelove Bootstrapa u // Optional
odjeljak prema potrebi. Predlažemo da bootstrap.scss
kao početnu točku koristite cijeli uvozni stog iz naše datoteke.
Zadane postavke varijable
Svaka Sass varijabla u Bootstrapu uključuje !default
oznaku koja vam omogućuje nadjačavanje zadane vrijednosti varijable u vašem vlastitom Sassu bez mijenjanja izvornog koda Bootstrapa. Kopirajte i zalijepite varijable prema potrebi, promijenite njihove vrijednosti i uklonite !default
oznaku. Ako je varijabla već dodijeljena, neće joj se ponovno dodijeliti zadane vrijednosti u Bootstrapu.
Potpuni popis Bootstrapovih varijabli pronaći ćete u scss/_variables.scss
. Neke su varijable postavljene na null
, te varijable ne prikazuju svojstvo osim ako nisu nadjačane u vašoj konfiguraciji.
Nadjačavanja varijabli moraju doći nakon uvoza naših funkcija, ali prije ostatka uvoza.
Evo primjera koji mijenja background-color
i color
za <body>
prilikom uvoza i kompajliranja 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
Po potrebi ponovite za bilo koju varijablu u Bootstrapu, uključujući globalne opcije u nastavku.
Karte i petlje
Bootstrap uključuje pregršt Sass mapa, parova ključnih vrijednosti koji olakšavaju generiranje obitelji povezanih CSS-ova. Koristimo Sass karte za naše boje, prijelomne točke 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 prema zadanim postavkama spojene u prazne. Ovo je učinjeno kako bi se omogućilo jednostavno proširenje dane Sass karte, ali dolazi po cijenu malo težeg uklanjanja stavki s karte.
Izmijeni kartu
Sve varijable u $theme-colors
mapi su definirane kao samostalne varijable. Da biste izmijenili postojeću boju na našoj $theme-colors
karti, dodajte sljedeće u svoju prilagođenu Sass datoteku:
$primary: #0074d9;
$danger: #ff4136;
Kasnije se ove varijable postavljaju u Bootstrapovu $theme-colors
mapu:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Dodaj na kartu
Dodajte nove boje $theme-colors
, ili bilo kojoj drugoj karti, stvaranjem nove Sass karte sa svojim prilagođenim vrijednostima i spajanjem s originalnom kartom. U ovom slučaju izradit ćemo novu $custom-colors
kartu i spojiti je s $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Ukloni s karte
Za uklanjanje boja s $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 prisutnost nekih specifičnih ključeva unutar Sass mapa koje smo koristili i sami ih proširujemo. Dok prilagođavate uključene karte, možete naići na pogreške gdje se koristi određeni ključ karte Sass.
Na primjer, koristimo tipke , primary
, success
i za veze, gumbe i stanja obrazaca. Zamjena vrijednosti ovih ključeva ne bi trebala predstavljati probleme, ali njihovo uklanjanje može uzrokovati probleme s Sass kompilacijom. U tim slučajevima morat ćete izmijeniti Sass kod koji koristi te vrijednosti.danger
$theme-colors
Funkcije
Boje
Pored Sass mapa koje imamo, boje tema također se mogu koristiti kao samostalne varijable, poput $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Možete posvijetliti ili potamniti boje s Bootstrapom tint-color()
i shade-color()
funkcijama. Ove funkcije će miješati boje s crnom ili bijelom, za razliku od Sassovih izvornih lighten()
i darken()
funkcija koje će mijenjati svjetlinu za fiksni iznos, što često ne dovodi do željenog 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));
}
U praksi biste pozvali funkciju i proslijedili joj parametre boje i težine.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Kontrast boja
Kako bi zadovoljili standarde pristupačnosti WCAG 2.0 za kontrast boja , autori moraju osigurati 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 algoritam WCAG 2.0 za izračun pragova kontrasta na temelju relativnog osvjetljenja u sRGB
prostoru boja za automatski vraćanje svijetle ( #fff
), tamne ( #212529
) ili crne ( #000
) boje kontrasta na temelju navedene osnovne boje. Ova je funkcija posebno korisna za mixins ili petlje u kojima generirate 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);
}
}
Također se može koristiti za jednokratne potrebe kontrasta:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Također možete odrediti osnovnu boju s našim funkcijama karte boja:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Escape SVG
Koristimo ovu escape-svg
funkciju za izbjegavanje znakova <
, >
i #
za SVG pozadinske slike. Kada koristite escape-svg
funkciju, URI-ji podataka moraju biti stavljeni u navodnike.
Funkcije zbrajanja i oduzimanja
Koristimo funkcije add
i subtract
za omotavanje CSS calc
funkcije. Primarna svrha ovih funkcija je izbjegavanje pogrešaka kada se 0
vrijednost "bez jedinice" prenese u calc
izraz. Izrazi poput calc(10px - 0)
će vratiti pogrešku u svim preglednicima, unatoč tome što su matematički točni.
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/
imenik sadrži gomilu mixina koji pokreću dijelove Bootstrapa, a također se mogu koristiti u vašem vlastitom projektu.
Sheme 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
}
}