Sass
Utilizza i nostri file Sass di origine per sfruttare variabili, mappe, mixin e funzioni per aiutarti a costruire più velocemente e personalizzare il tuo progetto.
Utilizza i nostri file Sass di origine per sfruttare variabili, mappe, mixin e altro ancora.
Struttura dei file
Quando possibile, evita di modificare i file core di Bootstrap. Per Sass, ciò significa creare il tuo foglio di stile che importi Bootstrap in modo da poterlo modificare ed estendere. Supponendo che tu stia utilizzando un gestore di pacchetti come npm, avrai una struttura di file simile a questa:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Se hai scaricato i nostri file sorgente e non stai utilizzando un gestore di pacchetti, ti consigliamo di impostare manualmente qualcosa di simile a quella struttura, mantenendo i file sorgente di Bootstrap separati dai tuoi.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Importazione
Nel tuo custom.scss, importerai i file Sass di origine di Bootstrap. Hai due opzioni: includi tutto Bootstrap o scegli le parti di cui hai bisogno. Incoraggiamo quest'ultimo, anche se tieni presente che ci sono alcuni requisiti e dipendenze tra i nostri componenti. Dovrai anche includere alcuni JavaScript per i nostri plugin.
// 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
Con quella configurazione in atto, puoi iniziare a modificare qualsiasi variabile e mappa Sass nel tuo file custom.scss. Puoi anche iniziare ad aggiungere parti di Bootstrap nella // Optionalsezione secondo necessità. Ti suggeriamo di utilizzare l'intero stack di importazione dal nostro bootstrap.scssfile come punto di partenza.
Default variabili
Ogni variabile Sass in Bootstrap include il !defaultflag che ti consente di sovrascrivere il valore predefinito della variabile nel tuo Sass senza modificare il codice sorgente di Bootstrap. Copia e incolla le variabili secondo necessità, modifica i loro valori e rimuovi il !defaultflag. Se una variabile è già stata assegnata, non verrà riassegnata dai valori predefiniti in Bootstrap.
Troverai l'elenco completo delle variabili di Bootstrap in scss/_variables.scss. Alcune variabili sono impostate su null, queste variabili non generano la proprietà a meno che non vengano sovrascritte nella configurazione.
Le sostituzioni delle variabili devono avvenire dopo l'importazione delle nostre funzioni, ma prima del resto delle importazioni.
Ecco un esempio che cambia il background-colore colorper <body>durante l'importazione e la compilazione di Bootstrap tramite 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
Ripetere se necessario per qualsiasi variabile in Bootstrap, comprese le opzioni globali di seguito.
Mappe e loop
Bootstrap include una manciata di mappe Sass, coppie di valori chiave che semplificano la generazione di famiglie di CSS correlati. Usiamo le mappe Sass per i nostri colori, punti di interruzione della griglia e altro ancora. Proprio come le variabili Sass, tutte le mappe Sass includono il !defaultflag e possono essere sovrascritte ed estese.
Alcune delle nostre mappe Sass sono unite in quelle vuote per impostazione predefinita. Questo viene fatto per consentire una facile espansione di una determinata mappa Sass, ma ha il costo di rendere leggermente più difficile la rimozione di oggetti da una mappa.
Modifica mappa
Tutte le variabili nella $theme-colorsmappa sono definite come variabili autonome. Per modificare un colore esistente nella nostra $theme-colorsmappa, aggiungi quanto segue al tuo file Sass personalizzato:
$primary: #0074d9;
$danger: #ff4136;
Successivamente, queste variabili vengono impostate nella $theme-colorsmappa di Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Aggiungi alla mappa
Aggiungi nuovi colori a $theme-colors, o a qualsiasi altra mappa, creando una nuova mappa Sass con i tuoi valori personalizzati e unendola con la mappa originale. In questo caso, creeremo una nuova $custom-colorsmappa e la uniremo con $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Rimuovi dalla mappa
Per rimuovere i colori da $theme-colorso da qualsiasi altra mappa, usa map-remove. Tieni presente che devi inserirlo tra i nostri requisiti e opzioni:
// 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
Chiavi richieste
Bootstrap presuppone la presenza di alcune chiavi specifiche all'interno delle mappe Sass poiché le abbiamo utilizzate ed estese noi stessi. Mentre personalizzi le mappe incluse, potresti riscontrare errori in cui viene utilizzata la chiave di una specifica mappa Sass.
Ad esempio, utilizziamo i tasti primary, success, e di per collegamenti, pulsanti e stati dei moduli. La sostituzione dei valori di queste chiavi non dovrebbe presentare problemi, ma la loro rimozione potrebbe causare problemi di compilazione Sass. In questi casi, dovrai modificare il codice Sass che utilizza quei valori.danger$theme-colors
Funzioni
Colori
Oltre alle mappe Sass che abbiamo, i colori dei temi possono essere usati anche come variabili autonome, come $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Puoi schiarire o scurire i colori con Bootstrap tint-color()e le shade-color()funzioni. Queste funzioni mescoleranno i colori con il nero o il bianco, a differenza del nativo di Sass lighten()e delle darken()funzioni che modificheranno la luminosità di una quantità fissa, che spesso non porta all'effetto desiderato.
// 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));
}
In pratica, chiamerai la funzione e passerai i parametri di colore e peso.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Contrasto di colore
Per soddisfare gli standard di accessibilità WCAG 2.0 per il contrasto del colore , gli autori devono fornire un rapporto di contrasto di almeno 4,5:1 , con pochissime eccezioni.
Una funzione aggiuntiva che includiamo in Bootstrap è la funzione di contrasto del colore, color-contrast. Utilizza l' algoritmo WCAG 2.0 per calcolare le soglie di contrasto in base alla luminanza relativa in uno sRGBspazio colore per restituire automaticamente un colore di contrasto chiaro ( #fff), scuro ( #212529) o nero ( #000) in base al colore di base specificato. Questa funzione è particolarmente utile per mixin o loop in cui stai generando più classi.
Ad esempio, per generare campioni di colore dalla nostra $theme-colorsmappa:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Può essere utilizzato anche per esigenze di contrasto una tantum:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Puoi anche specificare un colore di base con le nostre funzioni di mappatura dei colori:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Fuga SVG
Usiamo la escape-svgfunzione per sfuggire ai caratteri <, >e #per le immagini di sfondo SVG. Quando si utilizza la escape-svgfunzione, gli URI di dati devono essere citati.
Funzioni di somma e sottrazione
Usiamo le funzioni adde subtractper avvolgere la funzione CSS calc. Lo scopo principale di queste funzioni è evitare errori quando un valore "senza unità" 0viene passato a calcun'espressione. Espressioni come calc(10px - 0)restituiranno un errore in tutti i browser, nonostante siano matematicamente corrette.
Esempio in cui il calcolo è valido:
$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);
}
Esempio in cui il calcolo non è valido:
$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);
}
Miscele
La nostra scss/mixins/directory ha un sacco di mixin che alimentano parti di Bootstrap e possono essere utilizzati anche nel tuo progetto.
Combinazioni di colori
È disponibile un'abbreviazione per la prefers-color-schememedia query con supporto per light, darke schemi di colori personalizzati.
@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
}
}