Journal
Frontend Sass

Sass moderne : @use, @forward et la fin de @import

Journal du lundi 24 août 2026, généré le 24 août à 09:55

Dart Sass est la seule implémentation à suivre

LibSass et Ruby Sass sont abandonnés depuis plusieurs années. Si votre pipeline de build passe encore par node-sass, c'est un signal d'alerte : ce paquet enveloppe LibSass et n'évolue plus. Le compilateur de référence est désormais Dart Sass, disponible en CLI, en binaire autonome ou via le paquet npm sass.

@import est déprécié, pensez en modules

La directive @import sera retirée à terme : elle mélange tout dans un espace de noms global, ce qui provoque des collisions de variables et des imports multiples coûteux. Le remplaçant est le système de modules @use / @forward.

// _boutons.scss
@use "sass:math";

$rayon-defaut: 4px;

@mixin bouton($couleur) {
  background: $couleur;
  border-radius: math.div($rayon-defaut, 2);
}

// styles.scss
@use "boutons";

.cta {
  @include boutons.bouton(#3366ff);
}

Chaque fichier importé avec @use devient un module namespacé : on accède à ses membres via boutons.bouton(). Un fichier n'est compilé qu'une seule fois, même s'il est utilisé par plusieurs autres, ce qui règle les problèmes de duplication de CSS.

Membres privés

Une variable ou un mixin préfixé par _ ou - reste privé au module et n'est pas exposé à l'extérieur, un vrai encapsulement qui manquait à l'ancien système.

@forward pour construire une API publique

Dans un design system découpé en plusieurs partiels, @forward permet de ré-exposer les membres d'un fichier depuis un point d'entrée unique, avec un préfixe optionnel :

// _index.scss
@forward "boutons" as btn-*;
@forward "grilles";

La division par / est révolue

Utiliser / pour diviser deux nombres est déprécié depuis Dart Sass 1.33, car cette syntaxe entre en conflit avec le raccourci CSS font: 16px/1.5. Remplacez-la par math.div() ou, quand c'est possible, laissez le calcul au CSS natif avec calc().

Modules intégrés utiles à connaître

  • sass:math — math.div, math.round, math.clamp.
  • sass:color — remplace les anciennes fonctions globales darken()/lighten(), avec color.adjust() et color.scale() qui gèrent mieux les espaces colorimétriques.
  • sass:map — map.get, map.merge, indispensables pour piloter des thèmes via des maps de design tokens.
  • sass:list et sass:string — manipulation de listes et de chaînes sans dépendre de fonctions maison.

@extend reste un piège de spécificité

Préférez les placeholder selectors (%mon-style) aux classes réelles avec @extend : ils ne génèrent aucun sélecteur inutilisé dans le CSS final et évitent les regroupements de sélecteurs imprévisibles que produit l'extension de classes existantes.