Journal
Frontend Sass

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

Journal du samedi 15 août 2026, généré le 23 août à 18:57

@import est mort, vive @use

Dart Sass est aujourd'hui la seule implémentation maintenue (LibSass et Ruby Sass sont abandonnés). Depuis la version 1.80, @import déclenche un avertissement de dépréciation à chaque compilation, et sa suppression totale est prévue à terme. Si ton pipeline de build affiche encore des deprecation warnings jaunes, c'est le signal qu'il faut migrer vers @use et @forward.

Le problème que @import posait

  • Toutes les variables, fonctions et mixins étaient injectés dans un espace de noms global, avec des collisions fréquentes entre fichiers.
  • Un même fichier importé plusieurs fois était recompilé à chaque fois, ce qui dupliquait le CSS généré.
  • Impossible de savoir, à la lecture d'un fichier, d'où venait réellement une variable comme $primary-color.

@use : import avec espace de noms

@use charge un fichier une seule fois (même s'il est utilisé par plusieurs modules) et place son contenu dans un espace de noms basé sur le nom du fichier, ce qui évite les collisions.

// _colors.scss
$primary: #3f51b5;
@function contrast($c) {
  @return if(lightness($c) > 50%, black, white);
}

// button.scss
@use 'colors';

.btn {
  background: colors.$primary;
  color: colors.contrast(colors.$primary);
}

On peut renommer l'espace de noms avec as (@use 'colors' as c;) ou le supprimer totalement avec as * si tu es certain qu'il n'y aura pas de conflit.

@forward : construire une API de librairie

@forward sert à ré-exporter le contenu d'un module depuis un point d'entrée, typiquement un fichier _index.scss qui agrège plusieurs partiels internes.

// design-system/_index.scss
@forward 'colors';
@forward 'typography';
@forward 'spacing' show $gutter, $breakpoints;

La clause show (ou hide) permet de contrôler précisément ce qui devient public, un peu comme un export explicite en JavaScript. Le fichier consommateur n'a alors qu'à faire @use 'design-system'; pour accéder à tout ce qui a été transmis.

Configurer un module avec !default

Un module peut exposer des variables paramétrables via !default, puis être configuré au moment de l'appel à @use :

// _theme.scss
$radius: 4px !default;

// main.scss
@use 'theme' with ($radius: 8px);

Cette approche remplace élégamment les anciennes variables globales définies avant un @import, qui dépendaient de l'ordre de chargement des fichiers.

À retenir

  • Un module chargé avec @use n'est jamais évalué deux fois, contrairement à @import.
  • @forward ... show permet de construire une API de design system claire et versionnable.
  • Les outils comme sass-migrator automatisent une bonne partie de la conversion @import → @use/@forward.