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

Varijable komponente

Bootstrap 5 sve više koristi prilagođena svojstva kao lokalne varijable za razne komponente. Na ovaj način smanjujemo naš prevedeni CSS, osiguravamo da se stilovi ne nasljeđuju na mjestima kao što su ugniježđene tablice i dopuštamo neke osnovne preoblikovanja i proširenja komponenti Bootstrapa nakon Sass kompilacije.

Pogledajte dokumentaciju naše tablice za malo uvida u to kako koristimo CSS varijable . Naše navigacijske trake također koriste CSS varijable od v5.2.0. Također koristimo CSS varijable u svim našim mrežama—prvenstveno za oluke nove opt-in CSS rešetke— s većom upotrebom komponenti dolazi u budućnosti.

Kad god je to moguće, dodijelit ćemo CSS varijable na razini osnovne komponente (npr. .navbarza navigacijsku traku i njezine podkomponente). To smanjuje nagađanje o tome gdje i kako prilagoditi i omogućuje jednostavne izmjene od strane našeg tima u budućim ažuriranjima.

Prefiks

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

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

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, možete koristiti ove varijable u drugim CSS situacijama, kao i u svom JavaScriptu.