Skip to Content
BootstrapPartie 8 — Personnalisation avec Sass8.2 — Variables & options

8.2 — Variables & options

⏱️ TL;DR — Des centaines de variables pilotent l’apparence : couleurs ($primary…), typo ($font-family-base, $font-size-base, $line-height-base), rayons ($border-radius), espacements ($spacer). Les options globales $enable-* (booléens) activent/désactivent des comportements : ombres, gradients, transitions, coins arrondis, RFS…

🎯 Objectifs

  • Changer couleurs, typographie et rayons.
  • Activer/désactiver des options globales.

Variables courantes

@import "bootstrap/scss/functions";
 
// Couleurs
$primary:   #7952b3;
$success:   #1aae6f;
$danger:    #e63946;
 
// Typographie
$font-family-base: "Inter", system-ui, sans-serif;
$font-size-base:   1rem;      // = 16px
$line-height-base: 1.6;
$headings-font-weight: 700;
 
// Formes & espacement
$border-radius:  .5rem;
$border-radius-lg: 1rem;
$spacer: 1rem;                // base de l'échelle m-*/p-*
 
@import "bootstrap/scss/variables";
@import "bootstrap/scss/bootstrap";

Changer $primary recolore automatiquement boutons, liens, alertes, badges… car tout dérive de cette variable.

Options globales $enable-*

$enable-shadows:           true;   // active les ombres sur les composants
$enable-gradients:         true;   // dégradés subtils
$enable-rounded:           true;   // coins arrondis (false = tout carré)
$enable-transitions:       true;   // animations
$enable-negative-margins:  true;   // active les classes m-n1…
$enable-rfs:               true;   // responsive font sizing
$enable-validation-icons:  true;   // icônes dans les champs validés
OptionEffet si false
$enable-roundedtous les coins deviennent carrés
$enable-shadowspas d’ombres sur les composants
$enable-gradientspas de dégradés
$enable-transitionspas d’animations

Exemple : un thème « flat & carré »

$enable-rounded:    false;
$enable-shadows:    false;
$enable-gradients:  false;
$primary:           #111;

⚠️ Piège — Modifier une couleur via $primary change bien le bouton btn-primary, mais les couleurs subtle/emphasis (bg-primary-subtle) dérivent de la map $theme-colors : pour les régénérer correctement, changez la couleur avant l’import des maps (voir 8.3).

💡 Pour un dev React — Ces $enable-* sont un moyen rapide d’adapter Bootstrap à un design system minimaliste (flat design) sans réécrire de CSS. Un seul $enable-rounded: false et toute l’UI devient anguleuse.

✏️ Exercices

  1. Rendre toute l’interface anguleuse (sans coins arrondis).

✅ Solution

$enable-rounded: false; avant l’import de variables.

  1. Changer la police de base pour Inter.

✅ Solution

$font-family-base: "Inter", system-ui, sans-serif;.

🧠 Quiz de révision

1. Quelle variable pilote la couleur principale ?

$primary.

2. Quelle option désactive tous les coins arrondis ?

$enable-rounded: false.

3. Quelle variable règle la taille de police de base ?

$font-size-base.

4. Que fait $enable-shadows: true ?

Active les ombres sur les composants.

5. Sur quelle variable repose l’échelle d’espacement ?

$spacer.

Chapitre suivant : 8.3 — Les maps (couleurs, breakpoints)

8.1 — Importer Bootstrap en Sass8.3 — Les maps (couleurs, breakpoints)