Sass
Utilizați fișierele noastre sursă Sass pentru a profita de variabile, hărți, mixuri și funcții pentru a vă ajuta să construiți mai rapid și să vă personalizați proiectul.
Utilizați fișierele noastre sursă Sass pentru a profita de variabile, hărți, mixuri și multe altele.
Structura fișierului
Ori de câte ori este posibil, evitați modificarea fișierelor de bază ale Bootstrap. Pentru Sass, asta înseamnă să creați propria foaie de stil care să importe Bootstrap, astfel încât să o puteți modifica și extinde. Presupunând că utilizați un manager de pachete precum npm, veți avea o structură de fișiere care arată astfel:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Dacă ați descărcat fișierele noastre sursă și nu utilizați un manager de pachete, veți dori să configurați manual ceva similar cu acea structură, păstrând fișierele sursă ale Bootstrap separate de ale dvs.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Import
În custom.scss, veți importa fișierele sursă Sass ale Bootstrap. Aveți două opțiuni: includeți tot Bootstrap sau alegeți piesele de care aveți nevoie. Îl încurajăm pe acesta din urmă, deși rețineți că există anumite cerințe și dependențe între componentele noastre. De asemenea, va trebui să includeți ceva JavaScript pentru pluginurile noastre.
// 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
Cu această configurație, puteți începe să modificați oricare dintre variabilele și hărțile Sass din custom.scss. De asemenea, puteți începe să adăugați părți din Bootstrap în // Optionalsecțiune, după cum este necesar. Vă sugerăm să utilizați stiva completă de import din bootstrap.scssfișierul nostru ca punct de plecare.
Valori implicite variabile
Fiecare variabilă Sass din Bootstrap include indicatorul !defaultcare vă permite să suprascrieți valoarea implicită a variabilei în propriul dvs. Sass fără a modifica codul sursă al Bootstrap. Copiați și inserați variabile după cum este necesar, modificați-le valorile și eliminați !defaultmarcajul. Dacă o variabilă a fost deja atribuită, atunci nu va fi reatribuită de valorile implicite din Bootstrap.
Veți găsi lista completă a variabilelor Bootstrap în scss/_variables.scss. Unele variabile sunt setate la null, aceste variabile nu scot proprietatea decât dacă sunt suprascrise în configurația dvs.
Modificarea variabilelor trebuie să apară după ce funcțiile noastre sunt importate, dar înainte de restul importurilor.
Iată un exemplu care modifică background-colorși colorpentru <body>când se importă și se compila Bootstrap prin 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";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Repetați după cum este necesar pentru orice variabilă din Bootstrap, inclusiv opțiunile globale de mai jos.
Hărți și bucle
Bootstrap include o mână de hărți Sass, perechi valori cheie care facilitează generarea de familii de CSS înrudite. Folosim hărți Sass pentru culorile noastre, punctele de întrerupere ale grilei și multe altele. La fel ca variabilele Sass, toate hărțile Sass includ !defaultsteag și pot fi suprascrise și extinse.
Unele dintre hărțile noastre Sass sunt îmbinate în unele goale în mod implicit. Acest lucru se face pentru a permite extinderea ușoară a unei anumite hărți Sass, dar vine cu prețul de a face eliminarea elementelor de pe o hartă puțin mai dificilă.
Modificați harta
Toate variabilele din $theme-colorshartă sunt definite ca variabile independente. Pentru a modifica o culoare existentă în $theme-colorsharta noastră, adăugați următoarele la fișierul personalizat Sass:
$primary: #0074d9;
$danger: #ff4136;
Mai târziu, aceste variabile sunt setate în $theme-colorsharta Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Adăugați pe hartă
Adăugați noi culori la $theme-colors, sau la orice altă hartă, creând o nouă hartă Sass cu valorile dvs. personalizate și îmbinând-o cu harta originală. În acest caz, vom crea o nouă $custom-colorshartă și o vom îmbina cu $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Eliminați de pe hartă
Pentru a elimina culorile din $theme-colors, sau din orice altă hartă, utilizați map-remove. Rețineți că trebuie să îl introduceți între cerințele și opțiunile noastre:
// 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
Cheile necesare
Bootstrap presupune prezența unor chei specifice în hărțile Sass pe măsură ce le folosim și le extindem noi înșine. Pe măsură ce personalizați hărțile incluse, este posibil să întâmpinați erori atunci când este utilizată o anumită cheie a hărții Sass.
De exemplu, folosim tastele primary, success, și de la pentru link-uri, butoane și stări de formular. Înlocuirea valorilor acestor chei nu ar trebui să prezinte probleme, dar eliminarea lor poate cauza probleme de compilare Sass. În aceste cazuri, va trebui să modificați codul Sass care folosește acele valori.danger$theme-colors
Funcții
Culori
Pe lângă hărțile Sass pe care le avem, culorile temei pot fi folosite și ca variabile independente, cum ar fi $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Puteți deschide sau închide culorile cu ajutorul tint-color()și shade-color()funcțiile Bootstrap. Aceste funcții vor amesteca culorile cu alb sau negru, spre deosebire de nativul lui Sass lighten()și de darken()funcțiile care vor modifica luminozitatea cu o cantitate fixă, ceea ce adesea nu duce la efectul dorit.
// 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));
}
În practică, ați apela funcția și ați trece parametrii de culoare și greutate.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Contrastul culorilor
Pentru a îndeplini standardele de accesibilitate WCAG 2.0 pentru contrastul culorilor , autorii trebuie să furnizeze un raport de contrast de cel puțin 4,5:1 , cu foarte puține excepții.
O funcție suplimentară pe care o includem în Bootstrap este funcția de contrast de culoare, color-contrast. Utilizează algoritmul WCAG 2.0 pentru calcularea pragurilor de contrast bazate pe luminanța relativă într-un sRGBspațiu de culoare pentru a returna automat o culoare de contrast deschisă ( #fff), întunecată ( #212529) sau negru ( #000) pe baza culorii de bază specificate. Această funcție este utilă în special pentru mixuri sau bucle în care generați mai multe clase.
De exemplu, pentru a genera mostre de culoare de pe $theme-colorsharta noastră:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Poate fi folosit și pentru nevoi unice de contrast:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
De asemenea, puteți specifica o culoare de bază cu funcțiile noastre de hartă a culorilor:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Evadare SVG
Folosim escape-svgfuncția pentru a evada caracterele <, >și #pentru imaginile de fundal SVG. Când utilizați escape-svgfuncția, URI-urile de date trebuie citate.
Funcții de adunare și scădere
Folosim funcțiile addși subtractpentru a încheia calcfuncția CSS. Scopul principal al acestor funcții este de a evita erorile atunci când o 0valoare „fără unitate” este transmisă într-o calcexpresie. Expresii precum calc(10px - 0)vor returna o eroare în toate browserele, în ciuda faptului că sunt corecte din punct de vedere matematic.
Exemplu în care calculul este valid:
$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);
}
Exemplu în care calculul nu este valid:
$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);
}
Mixine
Directorul nostru scss/mixins/are o mulțime de mix-uri care alimentează părți din Bootstrap și pot fi, de asemenea, utilizate în cadrul propriului proiect.
Scheme de culori
O combinație scurtă pentru prefers-color-schemeinterogarea media este disponibilă cu suport pentru light, dark, și scheme de culori personalizate.
@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
}
}