CSS varijable

Bootstrap uključuje oko dva tuceta CSS prilagođenih svojstava (varijabli) u svom kompiliranom CSS-u, s desecima drugih na putu za poboljšanu prilagodbu po komponenti. 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-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));
}

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