Sass moderne : @use, @forward et sass:math remplacent @import

@import est officiellement déprécié dans Dart Sass depuis la version 1.80 et sera retiré définitivement. Si vos fichiers utilisent encore @import 'variables'; partout, il est temps de migrer vers le système de modules introduit par @use et @forward, qui évite les conflits de noms globaux et rend les dépendances explicites.

@use : des espaces de noms au lieu du global

Chaque fichier importé avec @use devient un espace de noms distinct, ce qui supprime les collisions entre variables ou mixins portant le même nom dans différents fichiers.

// _couleurs.scss
$primaire: #3454d1;

@mixin bouton($bg) {
  background: $bg;
  border-radius: 4px;
}

// styles.scss
@use 'couleurs';

.btn {
  @include couleurs.bouton(couleurs.$primaire);
}

On peut renommer l'espace de noms (@use 'couleurs' as c;) ou l'aplatir (@use 'couleurs' as *;), mais évitez ce dernier dans les gros projets : il recrée le problème de pollution globale que @use est censé résoudre.

@forward : construire une API publique

Pour un design system, @forward permet de créer un point d'entrée unique qui réexporte plusieurs partiels sans les exposer un par un.

// _index.scss
@forward 'couleurs';
@forward 'typographie' show $font-base;

Le mot-clé show restreint ce qui est visible depuis l'extérieur, un vrai contrôle d'API que @import ne permettait pas.

sass:math et la fin de la division par /

Utiliser / pour diviser deux nombres est déprécié en dehors du module math, car ce symbole sert aussi de séparateur CSS (ex. font: 16px/1.5). La syntaxe correcte est désormais :

@use 'sass:math';

.col {
  width: math.div(960, 12) * 1px;
}

Maps et boucles pour éviter la répétition

Les maps combinées à @each restent l'outil le plus rentable pour générer des classes utilitaires ou des thèmes.

$espacements: (sm: 4px, md: 8px, lg: 16px);

@each $nom, $valeur in $espacements {
  .m-#{$nom} { margin: $valeur; }
}

Points de vigilance

Un placeholder (%bouton) partagé via @extend génère un CSS plus compact qu'un mixin répété, mais complique parfois l'ordre de cascade : préférez les mixins pour tout ce qui prend des paramètres.
Les fichiers non préfixés par un underscore sont compilés individuellement : gardez le préfixe _ pour tous les partiels afin d'éviter des sorties CSS parasites.
Avec des outils comme Vite ou Webpack, vérifiez que votre version de Dart Sass est récente : les avertissements de dépréciation liés à @import et à la division legacy s'accumulent vite dans les gros projets.