Sass en 2026 : @use, @forward et l'abandon définitif de @import
<h2>Sass en 2026 : @use, @forward et l'abandon définitif de @import</h2>
<p>Dart Sass est aujourd'hui la seule implémentation maintenue (LibSass et Ruby Sass sont morts depuis longtemps), et <code>@import</code> est officiellement déprécié depuis Dart Sass 3.0. Si votre code l'utilise encore, chaque compilation affiche un avertissement : c'est le bon moment pour migrer vers le système de modules.</p>
<h3>@use remplace @import</h3>
<p><code>@use</code> charge un fichier une seule fois (même importé plusieurs fois dans l'arbre de dépendances) et <strong>namespace</strong> automatiquement ses variables, mixins et fonctions. Fini les collisions de noms globales.</p>
<pre><code>// _boutons.scss
@use "sass:math";
$rayon: 4px !default;
@mixin arrondi($facteur: 1) {
border-radius: math.div($rayon, $facteur) * 1;
}
// styles.scss
@use "boutons";
.btn { @include boutons.arrondi(2); }
</code></pre>
<p>Notez <code>math.div</code> : l'opérateur <code>/</code> comme division est supprimé depuis Dart Sass 2.0 (il ne sert plus qu'au raccourci CSS type <code>font: 16px/1.5</code>). Toute division doit passer par le module <code>sass:math</code>.</p>
<h3>@forward pour construire une API de librairie</h3>
<p><code>@forward</code> permet de ré-exporter les membres d'un fichier sans les charger soi-même, utile pour agréger plusieurs partials dans un point d'entrée unique.</p>
<ul>
<li><code>@forward "src/boutons" as btn-*;</code> préfixe les membres pour éviter les ambiguïtés.</li>
<li><code>@forward "src/config" show $couleur-primaire;</code> limite ce qui est exposé publiquement.</li>
<li><code>@use "config" with ($rayon: 8px);</code> permet de reconfigurer les valeurs <code>!default</code> d'un module au moment de son chargement, sans variable globale mutable.</li>
</ul>
<h3>Couleurs : sortir de la teinte HSL classique</h3>
<p>Le module <code>sass:color</code> a été réécrit pour gérer plusieurs espaces colorimétriques, dont <em>oklch</em>, plus perceptuellement uniforme que HSL. <code>color.scale($couleur, $lightness: 20%)</code> ajuste relativement une composante, tandis que <code>color.adjust</code> l'ajuste en absolu et <code>color.channel($couleur, "lightness", $space: oklch)</code> permet d'inspecter un canal dans l'espace de votre choix.</p>
<h3>Réflexion avec sass:meta</h3>
<p><code>meta.load-css</code> charge dynamiquement un module par nom de variable (utile pour du theming conditionnel), et <code>meta.module-functions</code> inspecte les fonctions exposées par un module chargé — pratique pour construire des design systems génériques sans dupliquer de logique.</p>