!default / !global

Définition

!default assigne une valeur seulement si la variable n'existe pas encore (idéal pour les librairies). !global rend une variable locale accessible dans le scope global.

Analogie

!default c'est 'sauf avis contraire', !global c'est 'je crie pour que tout le monde entende'.

Exemple de code

// Librairie
$primary: blue !default; // Overridable
$border-radius: 4px !default;

// Projet utilisateur (avant @use)
$primary: red; // Override la valeur

// !global (a eviter si possible)
@mixin set-theme($color) {
  $theme-color: $color !global;
}

Cas d'usage

Créer des librairies Sass configurables ou les utilisateurs peuvent overrider les valeurs par défaut.

Anti-pattern

Termes liés