Variables ($var)

Définition

Valeurs réutilisables prefixees par $ qui stockent couleurs, tailles, fonts, etc. Compilées en valeurs statiques (contrairement aux CSS custom properties).

Analogie

Des étiquettes sur des pots d'épices : au lieu de décrire l'épice, 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 liés