CSS varijable

Bootstrap uključuje oko dva tuceta CSS prilagođenih svojstava (varijabli) u svom kompajliranom CSS-u, sa desetinama drugih na putu za poboljšano prilagođavanje po komponenti. Oni omogućavaju lak pristup uobičajenim vrijednostima kao što su boje naše teme, tačke prekida i primarni skupovi fontova kada radite u inspektoru vašeg pretraživača, sandboxu koda ili općenitom izradi prototipa.

Sva naša prilagođena svojstva imaju prefiksbs- kako bi se izbjegli sukobi sa CSS-om treće strane.

Korijenske varijable

Evo varijabli koje uključujemo (imajte na umu da :rootje obavezna) kojima se može pristupiti bilo gdje gdje je učitan Bootstrap-ov CSS. Oni se nalaze u našoj _root.scssdatoteci i uključeni u naše kompajlirane dist datoteke.

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

Komponentne varijable

Takođe počinjemo da koristimo prilagođena svojstva kao lokalne varijable za različite komponente. Na ovaj način možemo smanjiti naš kompajlirani CSS, osigurati da se stilovi ne nasljeđuju na mjestima kao što su ugniježđene tablice i dozvoliti neko osnovno restiliranje i proširenje Bootstrap komponenti nakon Sass kompilacije.

Pogledajte našu tabelu dokumentaciju za neki uvid u to kako koristimo CSS varijable .

Također koristimo CSS varijable u našim mrežama – prvenstveno za oluke – s većom upotrebom komponenti u budućnosti.

Primjeri

CSS varijable nude sličnu fleksibilnost kao i Sass-ove varijable, ali bez potrebe za kompilacijom prije nego što se serviraju u pretraživač. Na primjer, ovdje resetujemo font i stilove veze naše stranice pomoću CSS varijabli.

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