Variables ($var)

Definition

Valeurs reutilisables prefixees par $ qui stockent couleurs, tailles, fonts, etc. Compilees en valeurs statiques (contrairement aux CSS custom properties).

Analogie

Des etiquettes sur des pots d'epices : au lieu de decrire l'epice, tu utilises son nom.

Exemple de code

$primary: #3498db;
$spacing-lg: 2rem;
$font-stack: 'Inter', sans-serif;

.button {
  background: $primary;
  padding: $spacing-lg;
  font-family: $font-stack;
}

Cas d'usage

Centraliser les valeurs de design pour les modifier en un seul endroit.

Anti-pattern

Termes lies