variabile CSS

Bootstrap include aproximativ două duzini de proprietăți personalizate (variabile) CSS în CSS-ul său compilat, cu alte zeci în curs de personalizare îmbunătățită pe componentă. Acestea oferă acces ușor la valorile utilizate în mod obișnuit, cum ar fi culorile temei, punctele de întrerupere și stivele de fonturi principale atunci când lucrați în inspectorul browserului dvs., un cod sandbox sau prototipuri generale.

Toate proprietățile noastre personalizate sunt prefixate cubs- pentru a evita conflictele cu CSS terțe părți.

Variabile rădăcină

Iată variabilele pe care le includem (rețineți că :rooteste necesar) care pot fi accesate oriunde este încărcat CSS-ul Bootstrap. Sunt localizate în _root.scssfișierul nostru și incluse în fișierele noastre dist compilate.

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

Variabile componente

De asemenea, începem să folosim proprietăți personalizate ca variabile locale pentru diferite componente. În acest fel, putem reduce CSS-ul nostru compilat, ne putem asigura că stilurile nu sunt moștenite în locuri precum tabelele imbricate și putem permite restilizarea de bază și extinderea componentelor Bootstrap după compilarea Sass.

Aruncă o privire la documentația tabelului nostru pentru o perspectivă asupra modului în care folosim variabilele CSS .

De asemenea, folosim variabile CSS în grilele noastre, în primul rând pentru jgheaburi, urmând să utilizăm mai multe componente în viitor.

Exemple

Variabilele CSS oferă o flexibilitate similară cu variabilele lui Sass, dar fără a fi nevoie de compilare înainte de a fi transmise browserului. De exemplu, aici resetăm fontul și stilurile de link ale paginii noastre cu variabile CSS.

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