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.

Su questa pagina

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 creare 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";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts 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";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. 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/maps";
@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

Ripetere se necessario per qualsiasi variabile in Bootstrap, comprese le opzioni globali di seguito.

Inizia con Bootstrap tramite npm con il nostro progetto iniziale! Vai al repository di modelli twbs /bootstrap-npm-starter per vedere come creare e personalizzare Bootstrap nel tuo progetto npm. Include le icone del compilatore Sass, Autoprefixer, Stylelint, PurgeCSS e Bootstrap.

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 inserire $theme-colorstra i nostri requisiti subito dopo la sua definizione variablese prima del suo utilizzo in maps:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@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 i requisiti di contrasto delle linee guida per l'accessibilità dei contenuti Web (WCAG) , gli autori devono fornire un contrasto del colore del testo minimo di 4,5:1 e un contrasto del colore non del testo minimo di 3:1 , con pochissime eccezioni.

Per aiutare con questo, abbiamo incluso la color-contrastfunzione in Bootstrap. Utilizza l' algoritmo del rapporto di contrasto WCAG 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
  }
}