@use / @forward

Définition

@use importe un module Sass avec un espace de noms (module.$var), et peut le configurer avec with(). @forward réexporte les membres d'un module pour créer des points d'entrée. Migration automatique : sass-migrator module --migrate-deps entrée.scss.

Analogie

@use c'est importer un outil, @forward c'est le mettre en vitrine dans ta boutique pour les autres.

Exemple de code

// _colors.scss
$primary: blue !default;

// _index.scss
@forward 'colors';

// component.scss
@use 'settings' with ($primary: navy); // configure
.btn { color: settings.$primary; }
// ou @use 'settings' as *;  // => $primary sans préfixe

Cas d'usage

Remplacer @import (déprécie) par un système de modules avec namespaces et encapsulation.

Anti-pattern

Sources

• sass-lang.com/documentation/at-rules/use/
• sass-lang.com/documentation/breaking-changes/import/