CSS proměnné

Bootstrap obsahuje přibližně dvě desítky vlastních vlastností (proměnných) CSS ve svém zkompilovaném CSS a desítky dalších se chystají zlepšit přizpůsobení na základě jednotlivých komponent. Poskytují snadný přístup k běžně používaným hodnotám, jako jsou barvy motivů, zarážky a primární sady písem při práci v inspektoru vašeho prohlížeče, karanténě kódu nebo obecném prototypování.

Všechny naše vlastní vlastnosti mají předponubs- , aby se předešlo konfliktům s CSS třetích stran.

Kořenové proměnné

Zde jsou proměnné, které zahrnujeme (všimněte si, že :rootje vyžadováno), ke kterým lze přistupovat odkudkoli, kde je načten CSS Bootstrapu. Jsou umístěny v našem _root.scsssouboru a zahrnuty v našich kompilovaných dist souborech.

: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í proměnné

Začínáme také využívat uživatelské vlastnosti jako lokální proměnné pro různé komponenty. Tímto způsobem můžeme zredukovat naše zkompilované CSS, zajistit, aby styly nebyly zděděny na místech, jako jsou vnořené tabulky, a umožnit základní restyling a rozšíření komponent Bootstrap po kompilaci Sass.

Podívejte se na naši dokumentaci k tabulce, kde najdete přehled o tom, jak používáme proměnné CSS .

Také používáme proměnné CSS napříč našimi mřížkami – primárně pro okapy – s větším využitím komponent v budoucnu.

Příklady

Proměnné CSS nabízejí podobnou flexibilitu jako proměnné Sass, ale bez nutnosti kompilace před doručením do prohlížeče. Například zde obnovujeme písmo a styly odkazů naší stránky pomocí proměnných CSS.

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