CSS-variabler

Bootstrap inkluderer rundt to dusin egendefinerte CSS-egenskaper (variabler) i sin kompilerte CSS, med dusinvis flere på vei for forbedret tilpasning per komponent. Disse gir enkel tilgang til ofte brukte verdier som våre temafarger, bruddpunkter og primære skriftstabler når du arbeider i nettleserens inspektør, en kodesandkasse eller generell prototyping.

Alle våre egendefinerte egenskaper er prefiks medbs- for å unngå konflikter med tredjeparts CSS.

Rotvariabler

Her er variablene vi inkluderer (merk at det :rooter påkrevd) som kan nås hvor som helst Bootstraps CSS er lastet. De er plassert i _root.scssfilen vår og inkludert i våre kompilerte dist-filer.

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

Komponentvariabler

Vi begynner også å bruke egendefinerte egenskaper som lokale variabler for ulike komponenter. På denne måten kan vi redusere den kompilerte CSS-en vår, sikre at stiler ikke arves på steder som nestede tabeller, og tillate litt grunnleggende omstiling og utvidelse av Bootstrap-komponenter etter Sass-kompilering.

Ta en titt på tabelldokumentasjonen vår for litt innsikt i hvordan vi bruker CSS-variabler .

Vi bruker også CSS-variabler på tvers av rutenettene våre – først og fremst for takrenner – med mer komponentbruk som kommer i fremtiden.

Eksempler

CSS-variabler tilbyr lignende fleksibilitet som Sass sine variabler, men uten behov for kompilering før de blir servert til nettleseren. For eksempel, her tilbakestiller vi sidens font- og lenkestiler med CSS-variabler.

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