CSS-variabelen

Bootstrap bevat veel CSS custom properties (variabelen) in zijn gecompileerde CSS, voor aanpassingen in realtime zonder dat je Sass opnieuw hoeft te compileren. Ze bieden eenvoudige toegang tot veelgebruikte waarden zoals onze themakleuren, breakpoints en primaire font stacks, of je nu in de inspector van je browser, in een code sandbox of gewoon aan het prototypen bent.

Al onze custom properties krijgen het voorvoegsel bs- om conflicten met CSS van derden te voorkomen.

Root-variabelen

Dit zijn de variabelen die we meeleveren (let op: de :root is verplicht) en die overal beschikbaar zijn waar de CSS van Bootstrap is geladen. Ze staan in ons bestand _root.scss en zitten in onze gecompileerde dist-bestanden.

{{< root.inline >}}
{{- $css := readFile "dist/css/bootstrap.css" -}}
{{- $match := findRE ":root {([^}]*)}" $css 1 -}}

{{- if (eq (len $match) 0) -}}
{{- errorf "Got no matches for :root in %q!" $.Page.Path -}}
{{- end -}}

{{- index $match 0 -}}

{{< /root.inline >}}

Componentvariabelen

Bootstrap 5 maakt steeds meer gebruik van custom properties als lokale variabelen voor diverse componenten. Zo beperken we onze gecompileerde CSS, zorgen we dat stijlen niet worden geërfd op plekken zoals geneste tabellen, en maken we het mogelijk om Bootstrap-componenten na Sass-compilatie basaal te herstylen en uit te breiden.

Bekijk onze tabeldocumentatie voor inzicht in hoe we CSS-variabelen gebruiken. Sinds v5.2.0 gebruiken ook onze navbars CSS-variabelen. Daarnaast gebruiken we CSS-variabelen in onze grids — vooral voor gutters in het nieuwe opt-in CSS Grid — en in de toekomst komt er meer componentgebruik bij.

Waar mogelijk kennen we CSS-variabelen toe op het niveau van het basiscomponent (bijv. .navbar voor de navbar en de subcomponenten daarvan). Dat beperkt het giswerk over waar en hoe je aanpassingen doet, en maakt het voor ons team eenvoudig om in toekomstige updates wijzigingen door te voeren.

Prefix

De meeste CSS-variabelen gebruiken een prefix om botsingen met je eigen codebase te voorkomen. Deze prefix komt bovenop de -- die bij elke CSS-variabele verplicht is.

Pas de prefix aan via de Sass-variabele $prefix. Standaard staat die op bs- (let op het streepje aan het eind).

Voorbeelden

CSS-variabelen bieden vergelijkbare flexibiliteit als Sass-variabelen, maar zonder dat er gecompileerd hoeft te worden voordat ze aan de browser worden geserveerd. Hieronder resetten we bijvoorbeeld de font- en linkstijlen van onze pagina met CSS-variabelen.

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

Grid-breakpoints

Hoewel we onze grid-breakpoints als CSS-variabelen meeleveren (behalve xs), moet je weten dat CSS-variabelen niet werken in media queries. Dat is een bewuste keuze in de CSS-specificatie voor variabelen, maar kan de komende jaren veranderen met ondersteuning voor env()-variabelen. Bekijk dit antwoord op Stack Overflow voor een aantal nuttige links. Tot die tijd kun je deze variabelen in andere CSS-situaties gebruiken, en ook in je JavaScript.