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-black: #000;
  --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", "Noto Sans", "Liberation Sans", Arial, 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;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Componentvariabelen

Bootstrap 5 maakt in toenemende mate gebruik van aangepaste eigenschappen als lokale variabelen voor verschillende componenten. Op deze manier verminderen we onze gecompileerde CSS, zorgen we ervoor dat stijlen niet worden overgenomen in plaatsen zoals geneste tabellen, en laten we wat basisrestyling en uitbreiding van Bootstrap-componenten toe na Sass-compilatie.

Bekijk onze tabeldocumentatie voor enig inzicht in hoe we CSS-variabelen gebruiken . Onze navigatiebalken gebruiken vanaf v5.2.0 ook CSS-variabelen . We gebruiken ook CSS-variabelen in onze rasters - voornamelijk voor goten, het nieuwe opt-in CSS-raster - met meer componentgebruik in de toekomst.

Waar mogelijk zullen we CSS-variabelen toewijzen op het niveau van de basiscomponenten (bijvoorbeeld .navbarvoor de navigatiebalk en zijn subcomponenten). Dit vermindert gissen over waar en hoe aan te passen, en zorgt voor gemakkelijke aanpassingen door ons team in toekomstige updates.

Voorvoegsel

De meeste CSS-variabelen gebruiken een voorvoegsel om botsingen met uw eigen codebase te voorkomen. Dit voorvoegsel is een aanvulling op het voorvoegsel --dat vereist is voor elke CSS-variabele.

Pas het voorvoegsel aan via de $prefixSass-variabele. Standaard is deze ingesteld op bs-(let op het achterliggende streepje).

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 in andere CSS-situaties gebruiken, evenals in uw JavaScript.