!default / !global

Definition

!default assigne une valeur seulement si la variable n'existe pas encore (ideal 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

Creer des librairies Sass configurables ou les utilisateurs peuvent overrider les valeurs par defaut.

Anti-pattern

Termes lies