spremenljivke CSS

Bootstrap vključuje številne lastnosti CSS po meri (spremenljivke) v svoj prevedeni CSS za prilagajanje v realnem času brez potrebe po ponovnem prevajanju Sass. Ti omogočajo enostaven dostop do pogosto uporabljenih vrednosti, kot so naše barve teme, prelomne točke in primarni skladi pisav, ko delate v inšpektorju brskalnika, peskovniku kode ali splošnem izdelavi prototipov.

Vse naše lastnosti po meri imajo predpono,bs- da se izognemo konfliktom s CSS tretjih oseb.

Korenske spremenljivke

Tukaj so spremenljivke, ki jih vključimo (upoštevajte, da :rootje zahtevana), do katerih lahko dostopate kjer koli je naložen CSS Bootstrapa. Nahajajo se v naši _root.scssdatoteki in vključeni v naše prevedene datoteke dist.

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

Spremenljivke komponent

Prav tako začenjamo uporabljati lastnosti po meri kot lokalne spremenljivke za različne komponente. Na ta način lahko zmanjšamo naš prevedeni CSS, zagotovimo, da slogi niso podedovani na mestih, kot so ugnezdene tabele, in omogočimo nekaj osnovnega preoblikovanja in razširitve komponent Bootstrap po prevajanju Sass.

Oglejte si dokumentacijo naše tabele za nekaj vpogleda v to, kako uporabljamo spremenljivke CSS .

Prav tako uporabljamo spremenljivke CSS v naših omrežjih – predvsem za žlebove – v prihodnosti pa bo več uporabe komponent.

Primeri

Spremenljivke CSS ponujajo podobno prilagodljivost kot Sassove spremenljivke, vendar brez potrebe po prevajanju, preden se prikažejo v brskalniku. Tukaj na primer ponastavljamo pisavo naše strani in sloge povezav s spremenljivkami CSS.

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

Prelomne točke mreže

Čeprav naše prelomne točke mreže vključujemo kot spremenljivke CSS (razen za xs), se zavedajte, da spremenljivke CSS ne delujejo v medijskih poizvedbah . To je zasnovano v specifikaciji CSS za spremenljivke, vendar se lahko v prihodnjih letih spremeni s podporo za env()spremenljivke. Oglejte si ta odgovor Stack Overflow za nekaj koristnih povezav. Medtem lahko te spremenljivke uporabljate v drugih situacijah CSS, pa tudi v svojem JavaScriptu.