CSS premenné

Bootstrap obsahuje približne dva tucty vlastných vlastností CSS (premenných) vo svojom kompilovanom CSS, pričom desiatky ďalších sa pripravujú na vylepšené prispôsobenie na základe jednotlivých komponentov. Poskytujú jednoduchý prístup k bežne používaným hodnotám, ako sú farby motívov, body prerušenia a zásobníky primárnych písiem pri práci v inšpektorovi prehliadača, v karanténe kódu alebo pri všeobecnom prototypovaní.

Všetky naše vlastné vlastnosti majú predponubs- , aby sa predišlo konfliktom s CSS tretej strany.

Koreňové premenné

Tu sú premenné, ktoré zahŕňame (všimnite si, že :rootje to povinné), ku ktorým je možné pristupovať kdekoľvek, kde je načítaný CSS Bootstrap. Sú umiestnené v našom _root.scsssúbore a zahrnuté v našich kompilovaných dist súboroch.

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

Komponentné premenné

Začíname tiež využívať vlastné vlastnosti ako lokálne premenné pre rôzne komponenty. Týmto spôsobom môžeme zredukovať naše skompilované CSS, zabezpečiť, aby sa štýly nededili na miestach, ako sú vnorené tabuľky, a umožniť základné preštylovanie a rozšírenie komponentov Bootstrap po kompilácii Sass.

Pozrite si našu dokumentáciu k tabuľke, kde nájdete prehľad o tom, ako používame premenné CSS .

Používame aj premenné CSS v našich mriežkach – predovšetkým pre odkvapy – s ďalším využívaním komponentov v budúcnosti.

Príklady

Premenné CSS ponúkajú podobnú flexibilitu ako premenné Sass, ale bez potreby kompilácie pred ich doručením do prehliadača. Tu napríklad obnovujeme písmo a štýly odkazov našej stránky pomocou premenných CSS.

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