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

Komponentne varijable

Bootstrap 5 sve više koristi prilagođena svojstva kao lokalne varijable za različite komponente. Na ovaj način smanjujemo naš kompajlirani CSS, osiguravamo da se stilovi ne nasljeđuju na mjestima kao što su ugniježđene tablice i dozvoljavamo neko osnovno restiliziranje i proširenje Bootstrap komponenti nakon Sass kompilacije.

Pogledajte našu tabelu dokumentaciju za neki uvid u to kako koristimo CSS varijable . Naše navigacijske trake također koriste CSS varijable od v5.2.0. Takođe koristimo CSS varijable u svim našim mrežama – prvenstveno za oluke, novu CSS mrežu – sa većom upotrebom komponenti u budućnosti.

Kad god je to moguće, dodijelit ćemo CSS varijable na nivou osnovne komponente (npr. .navbarza navigacijsku traku i njene podkomponente). Ovo smanjuje nagađanje o tome gdje i kako prilagoditi, i omogućava lake izmjene našeg tima u budućim ažuriranjima.

Prefiks

Većina CSS varijabli koristi prefiks kako bi se izbjegle kolizije s vašom vlastitom kodnom bazom. Ovaj prefiks je dodatak prefiksu --koji je potreban za svaku CSS varijablu.

Prilagodite prefiks putem $prefixvarijable Sass. Podrazumevano je postavljeno na bs-(obratite pažnju na crticu na kraju).

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.