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-black: #000;
  --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", "Noto Sans", "Liberation Sans", Arial, 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;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Variabili componenti

Bootstrap 5 fa sempre più uso di proprietà personalizzate come variabili locali per vari componenti. In questo modo riduciamo il nostro CSS compilato, assicuriamo che gli stili non vengano ereditati in luoghi come le tabelle nidificate e consentiamo un restyling e un'estensione di base 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 . Le nostre barre di navigazione utilizzano anche variabili CSS a partire dalla v5.2.0. Utilizziamo anche variabili CSS nelle nostre griglie, principalmente per le grondaie, la nuova griglia CSS di attivazione, con un maggiore utilizzo dei componenti in futuro.

Quando possibile, assegneremo variabili CSS a livello di componente di base (ad es. .navbarper la barra di navigazione ei suoi sottocomponenti). Ciò riduce le supposizioni su dove e come personalizzare e consente facili modifiche da parte del nostro team negli aggiornamenti futuri.

Prefisso

La maggior parte delle variabili CSS utilizza un prefisso per evitare collisioni con la tua base di codice. Questo prefisso è in aggiunta a --quello richiesto su ogni variabile CSS.

Personalizza il prefisso tramite la $prefixvariabile Sass. Per impostazione predefinita, è impostato su bs-(notare il trattino finale).

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, oltre che nel tuo JavaScript.