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 običajno 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-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;
}

Spremenljivke komponent

Bootstrap 5 vedno bolj uporablja lastnosti po meri kot lokalne spremenljivke za različne komponente. Na ta način 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 . Naše vrstice za krmarjenje od različice 5.2.0 dalje uporabljajo tudi spremenljivke CSS . Prav tako uporabljamo spremenljivke CSS v naših omrežjih – predvsem za žlebove nove opt-in mreže CSS – v prihodnosti pa bo več uporabe komponent.

Kadarkoli je to mogoče, bomo spremenljivke CSS dodelili na ravni osnovne komponente (npr. .navbarza navbar in njene podkomponente). To zmanjša ugibanje o tem, kje in kako prilagoditi, in omogoča preproste spremembe naši ekipi v prihodnjih posodobitvah.

Predpona

Večina spremenljivk CSS uporablja predpono, da se izogne ​​kolizijam z vašo kodno zbirko. Ta predpona je poleg predpone, --ki je obvezna za vsako spremenljivko CSS.

Prilagodite predpono s $prefixspremenljivko Sass. Privzeto je nastavljeno na bs-(upoštevajte pomišljaj na koncu).

Primeri

Spremenljivke CSS ponujajo podobno prilagodljivost kot Sassove spremenljivke, vendar brez potrebe po prevajanju, preden se prikažejo 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

Medtem ko 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.