CSS-variabelen

Bootstrap bevat ongeveer twee dozijn CSS-aangepaste eigenschappen (variabelen) in zijn gecompileerde CSS, en er zijn er nog tientallen op komst voor verbeterde aanpassing per component. Deze bieden gemakkelijke toegang tot veelgebruikte waarden zoals onze themakleuren, breekpunten en primaire lettertypestapels wanneer u werkt in de inspecteur van uw browser, een code-sandbox of algemene prototyping.

Al onze aangepaste eigenschappen worden voorafgegaan doorbs- om conflicten met CSS van derden te voorkomen.

Hoofdvariabelen

Dit zijn de variabelen die we opnemen (merk op dat het :rootvereist is) die overal toegankelijk zijn waar de CSS van Bootstrap is geladen. Ze bevinden zich in ons _root.scssbestand en zijn opgenomen in onze gecompileerde dist-bestanden.

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

Componentvariabelen

We beginnen ook gebruik te maken van aangepaste eigenschappen als lokale variabelen voor verschillende componenten. Op deze manier kunnen we onze gecompileerde CSS verminderen, ervoor zorgen dat stijlen niet worden overgenomen in plaatsen zoals geneste tabellen, en wat basisrestyling en uitbreiding van Bootstrap-componenten na Sass-compilatie toestaan.

Bekijk onze tabeldocumentatie voor enig inzicht in hoe we CSS-variabelen gebruiken .

We gebruiken ook CSS-variabelen in onze rasters, voornamelijk voor goten, en in de toekomst komt er meer componentgebruik.

Voorbeelden

CSS-variabelen bieden vergelijkbare flexibiliteit als de variabelen van Sass, maar zonder de noodzaak van compilatie voordat ze aan de browser worden aangeboden. Hier stellen we bijvoorbeeld het lettertype en de linkstijlen van onze pagina opnieuw in met CSS-variabelen.

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