Sass @use & @forward : Architecture modulaire pour CSS scalable

Sass : De l'ancien @import à une architecture modulaire moderne avec @use et @forward

Dans le monde du développement frontend, où les projets deviennent de plus en plus complexes et les bases de code s'étendent, une gestion efficace des styles devient cruciale. Sass, en tant que l'un des préprocesseurs CSS les plus populaires, a connu des changements significatifs visant à améliorer la modularité et la maintenabilité du code. Une étape clé de cette évolution a été l'abandon de la directive @import (désormais obsolète) au profit des puissantes et flexibles @use et @forward.

Pendant longtemps, @import a été la seule méthode pour inclure des fichiers Sass, mais elle présentait des inconvénients majeurs : pollution de l'espace de noms global, risque élevé de conflits et duplication de code. Avec la sortie imminente de Dart Sass 3.0.0, @import a été officiellement déprécié et sera entièrement supprimé, rendant l'adoption du nouveau système modulaire essentielle pour tout développeur moderne.

La directive @use : Isolation et gestion des espaces de noms

@use est un élément fondamental du nouveau système modulaire de Sass. Il charge un fichier Sass (module) et rend son contenu (variables, mixins, fonctions) disponible dans le fichier courant, mais les isole dans leur propre espace de noms. C'est une distinction clé par rapport à @import, qui prévient les conflits globaux et rend les dépendances explicites.

Utilisation de base :

@use 'path/to/file';

Par défaut, le nom de l'espace de noms est dérivé de la dernière partie du chemin du fichier, sans underscores ni extensions. Par exemple, lors de l'utilisation de @use '../helpers/colors';, les variables et fonctions de _colors.scss seront accessibles via le préfixe colors. :

// helpers/_colors.scss
$primary: blue;
$secondary: gray;

// components/_button.scss
@use '../helpers/colors';

.button {
  color: colors.$primary; // Accédé via l'espace de noms "colors"
  background-color: colors.$secondary;
}

Changer l'espace de noms avec as :

Pour plus de commodité ou de clarté, vous pouvez attribuer un nom personnalisé à un module en utilisant le mot-clé as :

@use 'helpers/colors' as myColors;

.button {
  color: myColors.$primary; // Accédé via "myColors"
}

Lors de la nomination des espaces de noms, vous devez respecter les règles d'identificateurs Sass :

• Autorisé : lettres (a-z, A-Z), chiffres (0-9, mais pas au début), camelCase, PascalCase.
• Interdit : tirets (-), espaces, caractères spéciaux, commencer par un chiffre.

Utilisation des modules intégrés de Sass

Sass fournit un ensemble de modules intégrés pour des tâches courantes telles que les opérations mathématiques, la manipulation de listes, de maps, de couleurs et de chaînes de caractères. Ces modules sont importés avec le préfixe sass: :

@use 'sass:math';
@use 'sass:list';
@use 'sass:map';
@use 'sass:color';
@use 'sass:string';

Exemples d'utilisation des fonctions des modules intégrés :

$width: math.div(100%, 3); // Division
$len: list.length((10px, 20px, 30px)); // Longueur de liste
$color: color.adjust(#336699, $lightness: 20%); // Ajustement de couleur
$index: string.index('hello world', 'world'); // Recherche de sous-chaîne

Il est crucial de se rappeler que les modules intégrés, comme les modules réguliers, doivent être explicitement importés dans chaque fichier où leurs fonctions sont utilisées. Ils ne sont pas hérités via d'autres imports.

Organisation du code et accès aux modules

Le système modulaire de Sass encourage une approche où chaque fichier SCSS déclare explicitement ses dépendances au début. Cela garantit la transparence et simplifie le refactoring. Les mixins et fonctions définis dans des fichiers personnalisés sont également disponibles via les espaces de noms.

Exemple de définition d'un mixin :

// helpers/_mixins.scss
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

Et son utilisation :

// components/_card.scss
@use '../helpers/mixins';

.card {
  @include mixins.flex-center;
}

Structure de dossiers recommandée :

Un projet Sass bien structuré pourrait ressembler à ceci :

scss/
  helpers/
    _colors.scss
    _variables.scss
    _mixins.scss
  components/
    _button.scss
    _card.scss
  pages/
    _about-page.scss
  template.scss // Fichier de compilation principal

Exemple de fichier de composant utilisant plusieurs modules :

// components/_button.scss
@use '../helpers/colors' as myColors;
@use '../helpers/variables';
@use '../helpers/mixins';

.button {
  background-color: myColors.$primary;
  padding: variables.$spacing-md;
  @include mixins.border-radius;
}

Avantages de l'approche modulaire avec les espaces de noms :

• Clarté : Il est immédiatement clair d'où provient une variable ou un mixin, améliorant la lisibilité du code.
• Pas de conflits : Les espaces de noms isolés garantissent que les variables et mixins ayant les mêmes noms dans différents modules n'entreront pas en conflit.
• Refactoring facilité : Les changements dans un module n'affectent pas les autres, tant que leur API est maintenue, simplifiant la mise à l'échelle et la modification.
• Support IDE : Les environnements de développement modernes fonctionnent mieux avec des espaces de noms explicites, offrant une autocomplétion précise.
• Évolutivité : La base de code reste compréhensible et gérable même dans de très grands projets.

Configuration des modules avec @use ... with()

La directive @use ... with() offre un mécanisme puissant pour configurer les modules lors de leur importation. Elle permet de surcharger les variables marquées !default en leur passant de nouvelles valeurs directement lors de l'importation du module.

Comment fonctionne !default :

Une variable déclarée avec !default utilise sa valeur uniquement si elle n'a pas été définie précédemment. Si la valeur est déjà établie (par exemple, dans un autre fichier ou via @use ... with()), !default est ignoré.

// helpers/_theme.scss
$bg-color: #ffffff !default; // Valeur par défaut
$text-color: #333333 !default; // Peut être surchargée

Surcharge des valeurs avec with() :

Vous pouvez passer de nouvelles valeurs pour les variables !default entre les parenthèses with() lors de l'importation d'un module :

// pages/dark-theme.scss
@use '../helpers/theme' with (
  $bg-color: #1a1a1a,
  $text-color: #f0f0f0
);

body {
  background: theme.$bg-color; // Sera #1a1a1a
  color: theme.$text-color; // Sera #f0f0f0
}

Notes importantes sur with() :

• @use ... with() ne fonctionne que lors de la première importation d'un module spécifique dans un fichier donné. Toutes les tentatives ultérieures d'importer le même module avec des valeurs with() différentes seront ignorées.
• De nombreuses bibliothèques Sass tierces utilisent !default pour leurs paramètres, permettant une personnalisation facile de leur comportement via with().

La directive @forward : Créer une API publique

@forward est une directive qui permet de réexporter le contenu d'un ou plusieurs modules, les rendant disponibles pour d'autres fichiers qui importent un fichier intermédiaire. Elle est utilisée pour créer un point d'entrée unique (API publique) pour un ensemble de modules, sans rendre leur contenu directement accessible dans le fichier où @forward est utilisé.

Exemple d'utilisation de _core.scss comme point d'entrée unique :

// _core.scss
@forward 'helpers/colors';
@forward 'helpers/variables';
@forward 'base/fonts';
@forward 'helpers/mixins';

Désormais, au lieu d'importer chaque fichier individuellement, vous pouvez simplement importer _core.scss :

// pages/about-page.scss
@use '../core.scss';

.button {
  color: core.$blue; // Variable de helpers/colors
  border-radius: core.$border-radius-medium; // Variable de helpers/variables
  @include core.flex-center; // Mixin de helpers/mixins
}

Avantages et inconvénients de l'approche _core.scss :

• Avantage : Simplifie les imports dans les fichiers consommateurs, créant une API claire pour l'ensemble du projet.
• Inconvénient : Tous les éléments forwardés utilisent l'espace de noms core (ou celui que vous avez spécifié), ce qui peut rendre plus difficile de déterminer le fichier d'origine d'une variable ou d'un mixin spécifique sans inspecter _core.scss.

Utilisation interne des modules forwardés :

Si le fichier _core.scss lui-même doit utiliser des variables ou des mixins des modules forwardés, il doit les importer explicitement en utilisant @use :

// _core.scss
@forward 'helpers/colors'; // Forwarding vers l'extérieur
@use 'helpers/colors' as c; // Pour usage interne dans _core.scss

body {
  background: c.$bg-color; // Fonctionne grâce à @use
}

Capacités avancées de @forward :

• Forwarding sélectif (show / hide) : Permet de spécifier explicitement quels éléments d'un module doivent être forwardés.

```scss

@forward 'colors' show $primary, $secondary; // Forwarder uniquement ces variables

@forward 'mixins' hide private-mixin; // Forwarder tout sauf private-mixin

```

• Configuration via with() lors du Forwarding : Similaire à @use ... with(), vous pouvez surcharger les variables !default dans le module forwardé.

```scss

// helpers/_theme.scss

$bg-color: #fff !default;

// _index.scss (fichier qui forwardera _theme.scss)

@forward 'theme' with (

$bg-color: #f0f0f0

);

```

Gérer les dépendances des modules

Dans le système modulaire de Sass, chaque fichier doit déclarer explicitement ses dépendances. Cela s'applique même lorsqu'un de vos modules (par exemple, _variables.scss) utilise des variables d'un autre module (_colors.scss). Même si _variables.scss et _colors.scss sont tous deux forwardés via _core.scss, _variables.scss doit toujours importer explicitement _colors.scss s'il utilise son contenu.

// _variables.scss
@use 'colors'; // Dépendance explicite à _colors.scss

$button-bg: colors.$primary;

Pourquoi c'est important :

• Clarté : Il est immédiatement clair de quels modules chaque fichier dépend, simplifiant la compréhension de la structure.
• Fiabilité : Lorsque les fichiers sont déplacés ou réorganisés, les dépendances restent intactes et compréhensibles.
• Support IDE : Les outils d'analyse statique et l'autocomplétion fonctionnent plus précisément.
• Refactoring : Il est facile de suivre où des modules et variables spécifiques sont utilisés.

Points clés à retenir

• @use et @forward remplacent l'obsolète @import, offrant une véritable modularité dans Sass.
• Les espaces de noms préviennent les conflits et rendent les dépendances explicites, améliorant l'évolutivité.
• @use ... with() permet une configuration flexible des modules en surchargeant les variables marquées !default.
• @forward est utilisé pour créer des points d'entrée uniques (API publiques), simplifiant la gestion d'un grand nombre de modules.
• Déclarer explicitement les dépendances dans chaque fichier est essentiel pour la maintenabilité et la prévisibilité du code Sass.

— Editorial Team