variabili CSS

Bootstrap include molte proprietà personalizzate CSS (variabili) nel CSS compilato per la personalizzazione in tempo reale senza la necessità di ricompilare Sass. 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-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --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-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --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));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}

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);
}

Punti di interruzione della griglia

Sebbene includiamo i nostri punti di interruzione della griglia come variabili CSS (tranne xs), tieni presente che le variabili CSS non funzionano nelle query multimediali . Questo è di progettazione nelle specifiche CSS per le variabili, ma potrebbe cambiare nei prossimi anni con il supporto per env()le variabili. Dai un'occhiata a questa risposta Stack Overflow per alcuni collegamenti utili. Nel frattempo, puoi utilizzare queste variabili in altre situazioni CSS, così come nel tuo JavaScript.