Colore

Colori a tema

Usiamo un sottoinsieme di tutti i colori per creare una tavolozza di colori più piccola per la generazione di schemi di colori, disponibili anche come variabili Sass e una mappa Sass nel scss/_variables.scssfile di Bootstrap.

Tutti questi colori sono disponibili come mappa Sass, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Dai un'occhiata alle nostre mappe Sass e ai documenti sui loop per come modificare questi colori.

Tutti i colori

Tutti i colori Bootstrap sono disponibili come variabili Sass e una mappa Sass nel scss/_variables.scssfile. Per evitare un aumento delle dimensioni dei file, non creiamo classi di colore del testo o dello sfondo per ciascuna di queste variabili. Invece, scegliamo un sottoinsieme di questi colori per una tavolozza dei temi .

Assicurati di monitorare i rapporti di contrasto mentre personalizzi i colori. Come mostrato di seguito, abbiamo aggiunto tre rapporti di contrasto a ciascuno dei colori principali: uno per i colori attuali del campione, uno per il bianco e uno per il nero.

Appunti sul Sass

Sass non può generare variabili in modo programmatico, quindi abbiamo creato manualmente variabili per ogni tinta e sfumatura. Specifichiamo il valore del punto medio (ad esempio, $blue-500) e utilizziamo funzioni di colore personalizzate per tingere (schiarire) o sfumare (scurire) i nostri colori tramite la mix()funzione colore di Sass.

L'utilizzo mix()non è lo stesso di lighten()e : darken()il primo fonde il colore specificato con il bianco o il nero, mentre il secondo regola solo il valore di luminosità di ciascun colore. Il risultato è una suite di colori molto più completa, come mostrato in questa demo di CodePen .

Le nostre funzioni tint-color()e shade-color()si utilizzano mix()insieme alla nostra $theme-color-intervalvariabile, che specifica un valore percentuale a gradini per ogni colore misto che produciamo. Vedere i file scss/_functions.scsse scss/_variables.scssper il codice sorgente completo.

Mappe a colori Sass

I file Sass di origine di Bootstrap includono tre mappe per aiutarti a scorrere rapidamente e facilmente un elenco di colori e i loro valori esadecimali.

• $colorselenca tutti i nostri 500colori di base disponibili ( ) .
• $theme-colorselenca tutti i colori del tema denominati semanticamente (mostrati di seguito)
• $grayselenca tutte le tinte e le sfumature di grigio

All'interno scss/_variables.scsstroverai le variabili di colore di Bootstrap e la mappa Sass. Ecco un esempio della $colorsmappa del Sass:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Aggiungi, rimuovi o modifica i valori all'interno della mappa per aggiornare il modo in cui vengono utilizzati in molti altri componenti. Sfortunatamente in questo momento, non tutti i componenti utilizzano questa mappa Sass. Gli aggiornamenti futuri si sforzeranno di migliorare questo aspetto. Fino ad allora, pianifica di utilizzare le ${color}variabili e questa mappa Sass.

Esempio

Ecco come puoi usarli nel tuo Sass:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Sono inoltre disponibili classi di utilità colore e sfondocolor per l'impostazione e background-colorl'utilizzo dei 500valori di colore.