CSS varijable

Bootstrap uključuje mnoga CSS prilagođena svojstva (varijable) u svom prevedenom CSS-u za prilagođavanje u realnom vremenu bez potrebe za ponovnim kompajliranjem Sass-a. 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-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;
}

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

Prelomne tačke mreže

Iako uključujemo naše tačke prekida mreže kao CSS varijable (osim za xs), imajte na umu da CSS varijable ne rade u medijskim upitima . Ovo je dizajnirano u CSS specifikaciji za varijable, ali se može promijeniti u narednim godinama uz podršku za env()varijable. Pogledajte ovaj odgovor na preklapanje steka za neke korisne veze. U međuvremenu, ove varijable možete koristiti u drugim CSS situacijama, kao iu svom JavaScriptu.