CSS-variabler

Bootstrap inkluderar cirka två dussin anpassade CSS-egenskaper (variabler) i sin kompilerade CSS, med dussintals fler på väg för förbättrad anpassning per komponent. Dessa ger enkel åtkomst till vanliga värden som våra temafärger, brytpunkter och primära teckensnittsstaplar när du arbetar i din webbläsares inspektör, en kodsandlåda eller allmän prototyp.

Alla våra anpassade egenskaper har prefixbs- för att undvika konflikter med tredje parts CSS.

Rotvariabler

Här är de variabler vi inkluderar (observera att det :rootkrävs) som kan nås var som helst där Bootstraps CSS laddas. De finns i vår _root.scssfil och ingår i våra kompilerade 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 börjar också använda anpassade egenskaper som lokala variabler för olika komponenter. På så sätt kan vi minska vår kompilerade CSS, säkerställa att stilar inte ärvs på platser som kapslade tabeller, och tillåta en del grundläggande omstyling och utökning av Bootstrap-komponenter efter Sass-kompilering.

Ta en titt på vår tabelldokumentation för lite insikt i hur vi använder CSS-variabler .

Vi använder också CSS-variabler över våra rutnät – främst för takrännor – med mer komponentanvändning som kommer i framtiden.

Exempel

CSS-variabler erbjuder liknande flexibilitet som Sass variabler, men utan behov av kompilering innan de serveras till webbläsaren. Till exempel, här återställer vi vår sidas teckensnitt och länkstilar med CSS-variabler.

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