Skip to Content
BootstrapPartie 8 — Personnalisation avec Sass8.5 — Les variables CSS (--bs-*)

8.5 — Les variables CSS (—bs-*)

⏱️ TL;DR — Bootstrap 5 expose des variables CSS --bs-* au runtime (--bs-primary, --bs-body-bg, --bs-border-radius, --bs-gutter-x…). Contrairement au Sass (compilé), on peut les surcharger dans le navigateur, par sélecteur, en inline, ou même en JavaScript — sans recompiler. C’est la base des color modes.

🎯 Objectifs

  • Distinguer variables Sass (build) et variables CSS (runtime).
  • Surcharger --bs-* globalement, localement, en JS.
  • Utiliser les variables de composant.

Sass vs CSS variables

Variable Sass ($primary)Variable CSS (--bs-primary)
Momentà la compilationau runtime (navigateur)
Modifiable après build❌✅
Portéeglobale au buildpar sélecteur, cascade CSS
Idéal pourthème de fond, poids, optionsthèmes dynamiques, dark mode, overrides ponctuels

Surcharger globalement

:root {
  --bs-primary: #7952b3;
  --bs-body-font-family: "Inter", sans-serif;
  --bs-border-radius: .75rem;
}

Surcharger localement

<!-- une carte avec ses propres tokens, sans toucher au reste -->
<div class="card" style="--bs-card-border-color: #7952b3; --bs-card-cap-bg: #f3effa;">
  …
</div>

Beaucoup de composants exposent leurs propres variables : --bs-card-*, --bs-btn-*, --bs-nav-link-*, --bs-modal-*… On les redéfinit localement pour un « thème » ciblé.

Surcharger en JavaScript

document.documentElement.style.setProperty('--bs-primary', '#e63946')

Idéal pour un sélecteur de couleur d’accentuation piloté par l’utilisateur.

Variables de couleur RGB

Certaines couleurs ont une version -rgb pour composer des rgba() :

.overlay { background: rgba(var(--bs-primary-rgb), .1); }

⚠️ Piège — Redéfinir --bs-primary en CSS ne recolore pas tout aussi profondément que changer $primary en Sass : certaines couleurs dérivées (subtle, emphasis, hover des boutons) sont figées à la compilation. Pour un changement total de marque, passez par le Sass ; pour un ajustement dynamique, par les CSS vars.

💡 Pour un dev React — Les --bs-* sont parfaites pour un thème piloté par l’état : stockez la couleur d’accent dans un contexte, appliquez-la via style={{'--bs-primary': accent}} sur un wrapper. Pas de recompilation, changement instantané.

✏️ Exercices

  1. Changer la couleur primaire à la volée depuis un input color en JS.

✅ Solution

input.addEventListener('input', e => document.documentElement.style.setProperty('--bs-primary', e.target.value)).

  1. Donner à une seule carte un fond d’en-tête violet clair sans CSS global.

✅ Solution

<div class="card" style="--bs-card-cap-bg:#f3effa">…</div>.

🧠 Quiz de révision

1. Différence clé Sass vs CSS variable ?

Sass = compilation ; CSS var = runtime (modifiable dans le navigateur).

2. Où redéfinir une variable CSS globalement ?

Sur :root.

3. Comment changer --bs-primary en JS ?

document.documentElement.style.setProperty('--bs-primary', …).

4. À quoi sert la version -rgb d’une couleur ?

À composer des rgba(var(--bs-primary-rgb), α).

5. Pour un rebranding complet, Sass ou CSS var ?

Sass (les couleurs dérivées sont figées à la compilation).

Chapitre suivant : 8.6 — Un build minimal

8.4 — Functions & mixins8.6 — Un build minimal