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";
@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
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";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@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";
@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
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
We use the escape-svg function to escape the <, > and # characters for SVG background images. When using the escape-svg function, data URIs must be quoted.
Add and Subtract functions
We use the add and subtract functions to wrap the CSS calc function. The primary purpose of these functions is to avoid errors when a “unitless” 0 value is passed into a calc expression. Expressions like calc(10px - 0) will return an error in all browsers, despite being mathematically correct.
Example where the calc is 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);
}
Example where the calc is invalid:
$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
Our scss/mixins/ directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project.
Color schemes
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
}
}