Modules (Sass Modules)

Définition

Système de modules fondé sur @use/@forward qui remplace @import. Chaque fichier est un module avec sa propre portée, ce qui évite les collisions de noms. @import est officiellement déprécié depuis Dart Sass 1.80.0 (17 octobre 2024) et sera retiré dans Dart Sass 3.0.

Analogie

Des appartements dans un immeuble : chacun a ses affaires, tu sonnes pour emprunter quelque chose.

Exemple de code

// @use charge le module une seule fois
@use 'sass:math';
@use 'sass:color';
@use './config' as cfg;

.box {
  width: math.div(100%, 3);
  color: color.adjust(cfg.$primary, $lightness: 10%);
}

Cas d'usage

Structurer un projet Sass en modules encapsulés sans effets de bord globaux.

Anti-pattern

Termes liés

Sources

• sass-lang.com/blog/import-is-deprecated/
• sass-lang.com/documentation/breaking-changes/import/