CSS varijable

Bootstrap uključuje mnoga CSS prilagođena svojstva (varijable) u svoj kompilirani CSS za prilagodbu u stvarnom vremenu bez potrebe za ponovnim kompajliranjem Sass-a. One omogućuju jednostavan pristup često korištenim vrijednostima kao što su boje naše teme, prijelomne točke i primarni hrpovi fontova kada radite u inspektoru preglednika, sandboxu koda ili općoj izradi prototipova.

Sva naša prilagođena svojstva imaju prefiksbs- kako bismo izbjegli sukobe s CSS-om treće strane.

Korijenske varijable

Ovdje su varijable koje uključujemo (imajte na umu da :rootje obavezna) kojima se može pristupiti bilo gdje gdje se učita Bootstrapov CSS. Nalaze se u našoj _root.scssdatoteci i uključeni u naše kompilirane 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;
}

Varijable komponente

Također počinjemo koristiti prilagođena svojstva kao lokalne varijable za razne komponente. Na taj način možemo smanjiti naš kompajlirani CSS, osigurati da se stilovi ne nasljeđuju na mjestima kao što su ugniježđene tablice i dopustiti neke osnovne preoblikovanja i proširenja Bootstrap komponenti nakon Sass kompilacije.

Pogledajte dokumentaciju naše tablice za malo uvida u to kako koristimo CSS varijable .

Također koristimo CSS varijable u svim našim mrežama—prvenstveno za oluke—s većim korištenjem komponenti u budućnosti.

Primjeri

CSS varijable nude sličnu fleksibilnost kao Sassove varijable, ali bez potrebe za kompilacijom prije posluživanja pregledniku. Na primjer, ovdje poništavamo font naše stranice i stilove veza s CSS varijablama.

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

Prijelomne točke mreže

Iako uključujemo naše prijelomne točke 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 može se promijeniti u narednim godinama s podrškom za env()varijable. Pogledajte ovaj odgovor Stack Overflowa za neke korisne veze. U međuvremenu, ove varijable možete koristiti u drugim CSS situacijama, kao i u svom JavaScriptu.