Variabili CSS

Bootstrap include circa due dozzine di proprietà personalizzate CSS (variabili) nel CSS compilato, con decine di altre in arrivo per una migliore personalizzazione in base al componente. Questi forniscono un facile accesso ai valori di uso comune come i colori del tema, i punti di interruzione e gli stack di caratteri primari quando si lavora nella finestra di ispezione del browser, in una sandbox del codice o nella prototipazione generale.

Tutte le nostre proprietà personalizzate sono precedute dabs- per evitare conflitti con CSS di terze parti.

Variabili radice

Ecco le variabili che includiamo (notare che :rootè obbligatorio) a cui è possibile accedere ovunque sia caricato il CSS di Bootstrap. Si trovano nel nostro _root.scssfile e sono inclusi nei nostri file dist compilati.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

Variabili componenti

Stiamo anche iniziando a utilizzare le proprietà personalizzate come variabili locali per vari componenti. In questo modo possiamo ridurre il nostro CSS compilato, assicurarci che gli stili non vengano ereditati in luoghi come le tabelle nidificate e consentire un restyling di base e l'estensione dei componenti Bootstrap dopo la compilazione di Sass.

Dai un'occhiata alla documentazione della nostra tabella per avere un'idea di come stiamo usando le variabili CSS .

Utilizziamo anche variabili CSS nelle nostre griglie, principalmente per le grondaie, con un maggiore utilizzo dei componenti in futuro.

Esempi

Le variabili CSS offrono una flessibilità simile alle variabili di Sass, ma senza la necessità di essere compilate prima di essere servite al browser. Ad esempio, qui stiamo reimpostando il carattere della nostra pagina e gli stili di collegamento con le variabili CSS.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}