CSS-variabelen

Bootstrap bevat veel aangepaste CSS-eigenschappen (variabelen) in de gecompileerde CSS voor realtime aanpassingen zonder dat Sass opnieuw hoeft te worden gecompileerd. 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-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --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-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --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));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}

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 toestaan ​​na Sass-compilatie.

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

Rasteronderbrekingen

Hoewel we onze rasteronderbrekingspunten opnemen als CSS-variabelen (behalve voor xs), moet u er rekening mee houden dat CSS-variabelen niet werken in mediaquery's . Dit is inherent aan de CSS-specificatie voor variabelen, maar kan de komende jaren veranderen met ondersteuning voor env()variabelen. Bekijk dit Stack Overflow-antwoord voor enkele handige links. In de tussentijd kunt u deze variabelen gebruiken in andere CSS-situaties, evenals in uw JavaScript.