Le `@forward` dans SASS

Articles

Cet article explique le @forward dans SASS.

Nous allons expliquer @forward de manière simple, avec des exemples pratiques.

YouTube Video

Le `@forward` dans SASS

Qu'est-ce que `@forward` ?

Dans le système de modules de SASS, on utilise @use et @forward à la place de @import. @forward est une fonctionnalité importante pour garder votre architecture propre. C’est une directive utilisée pour « exposer » des variables, mixins et fonctions définies dans d’autres fichiers. Au lieu de l'utiliser seul, il agit comme un point d'entrée en spécifiant : « Utilisez ce module à partir d'ici. ».

1@forward "variables";

Ce code signifie « rendre le contenu de variables.scss disponible pour d'autres fichiers. ».

Différence entre `@use` et `@forward`

@use et @forward sont des syntaxes pour gérer les modules, mais leurs objectifs sont clairement différents. @use est une directive pour utiliser des éléments dans le fichier, tandis que @forward est une directive pour rendre les éléments accessibles à d'autres fichiers.

1// @use: import the module for use in this file
2@use "variables";
3
4// @forward: re-export the module for other files to consume
5@forward "variables";

@use représente les dépendances nécessaires à l'implémentation du fichier courant, alors que @forward fait du fichier un point d'entrée API public. Comprendre cette différence vous aidera à décider où utiliser @forward.

Pourquoi `@forward` est-il nécessaire ?

Au fur et à mesure que vous ajoutez des fichiers Sass, vous risquez d'avoir à écrire de nombreuses instructions @use. En utilisant @forward, vous pouvez centraliser tous les éléments dans un fichier d'entrée unique.

1styles/
2├─ foundation/
3│  ├─ _variables.scss
4│  ├─ _mixins.scss
5│  └─ _index.scss
6└─ main.scss

Dans cette structure, _index.scss sert d'« API publique ».

Utilisation de base de `@forward`

Voyons l'utilisation de base de @forward.

1// _variables.scss
2// Color definitions used across the project
3
4$primary-color: #006ab1;
5$secondary-color: #e0f0ff;
6
7// Internal use only (will be hidden via @forward hide)
8$debug-color: magenta;

Au lieu d'utiliser directement cette variable avec @use, vous les regroupez avec @forward.

1// _index.scss
2@forward "variables";

À ce stade, _index.scss ne contient rien ; c'est simplement un fichier relais.

Utilisation de modules qui ont été transmis avec `@forward`

Plutôt que d'utiliser directement (@use) les fichiers individuels, vous n'utilisez que le fichier index qui a regroupé les @forward côté utilisateur. Cela vous permet de l'utiliser comme une interface stable sans avoir à connaître la structure interne.

1// main.scss
2// Import the public API of the foundation layer
3@use "foundation";
4
5.button {
6  background-color: foundation.$primary-color;
7}

Avec cette conception, même si l'emplacement des définitions des variables ou mixins change, vous pouvez modifier la structure interne sans devoir changer la moindre ligne de code côté utilisateur.

Combiner plusieurs modules avec `@forward`

Dans le développement réel, il est courant de séparer les variables, mixins et fonctions selon leurs rôles. La directive @forward peut être utilisée plusieurs fois, ce qui permet de regrouper des modules séparés dans une seule API publique.

Ci-dessous, nous fournissons des exemples de mixins et de fonctions et présentons une conception qui les expose à l’extérieur via une interface unique.

 1// _mixins.scss
 2// Reusable mixins for layout and components
 3
 4// Reset default button styles
 5@mixin button-reset {
 6  appearance: none;
 7  background: none;
 8  border: none;
 9  padding: 0;
10  margin: 0;
11  font: inherit;
12  color: inherit;
13}
14
15// Clearfix utility
16@mixin clearfix {
17  &::after {
18    content: "";
19    display: table;
20    clear: both;
21  }
22}
23
24// Internal mixin (not intended to be part of the public API)
25@mixin debug-outline {
26  outline: 2px dashed red;
27}

 1// _functions.scss
 2// Utility functions for consistent styling
 3
 4@use "sass:math";
 5
 6// Convert px to rem based on a 16px root size
 7@function rem($px) {
 8  @return math.div($px, 16) * 1rem;
 9}
10
11// Clamp a value between a minimum and maximum
12@function clamp-value($value, $min, $max) {
13  @return math.max($min, math.min($value, $max));
14}

1// _index.scss
2// Re-export variables, mixins, and functions as a single public API
3@forward "variables";
4@forward "mixins";
5@forward "functions";

En exposant uniquement ce fichier index à l'extérieur, vous pouvez cacher la structure interne et fournir une interface conviviale aux utilisateurs.

Prévenir les conflits de nommages (`as`)

Si la même variable ou le même mixin est défini dans plusieurs modules, vous pouvez utiliser as avec @forward afin d'ajouter un préfixe lors de l'exposition pour éviter les conflits de nom.

1// Add a prefix when re-exporting to avoid name collisions
2@forward "variables" as var-*;

Avec ce code, $primary-color dans variables sera exposé sous le nom suivant :.

1// foundation.$var-primary-color

Cette méthode permet de définir clairement les règles de design et d'assurer une montée en charge en toute sécurité. C'est une technique essentielle, surtout pour les projets de grande taille ou les bibliothèques partagées.

Masquer les membres non nécessaires (`hide`)

Les modules peuvent contenir des variables ou des mixins destinés uniquement à l'implémentation interne. En utilisant hide, vous pouvez les exclure lors de la ré-exposition et empêcher un accès externe.

1// Re-export everything except internal debug variables
2@forward "variables" hide $debug-color;

Avec cette configuration, $debug-color n'est valable qu'à l'intérieur du module, ce qui évite son usage accidentel par des utilisateurs.

Spécification des membres à exposer (`show`)

Si vous souhaitez exposer uniquement certains mixins ou fonctions, utilisez show. En limitant ce qui est exposé, vous pouvez clarifier l’objectif du module et son intention de conception.

1// Explicitly expose only selected mixins as the public API
2@forward "mixins" show button-reset, clearfix;

En utilisant show de cette manière, on voit d'un coup d'œil quelles APIs sont officiellement utilisables.

`@forward` ne peut pas être utilisé seul

Un point important est que les variables transmises avec @forward ne peuvent pas être utilisées dans ce fichier.

1@forward "variables";
2
3.test {
4  color: $primary-color; // Error
5}

@forward sert uniquement à « ré-exposer », tandis que « utiliser » est le rôle de @use.

Exemple de séparation correcte des rôles

Dans la conception de modules Sass, il est idéal de bien séparer la couche publique (API) et la couche d'implémentation. @forward définit l'API publique, et @use la consomme du côté implémentation.

1// _index.scss (public API)
2@forward "variables";
3@forward "mixins";

1// _component.scss
2// Consume the public API of the foundation layer
3@use "foundation";
4
5.card {
6  color: foundation.$primary-color;
7}

Avec cette structure, il devient clair quelles parties sont des interfaces publiques et lesquelles sont des implémentations internes, menant à une meilleure transparence de conception.

La différence fondamentale avec `@import`

@import étend toutes les définitions importées dans le scope global. À l'inverse, @use et @forward exposent explicitement les éléments et y accèdent via des espaces de nommage.

 1// @import (deprecated)
 2// Everything is injected into the global scope
 3$color: red;
 4
 5.button-import {
 6  color: $color;
 7}
 8
 9// @use + @forward (recommended)
10// Access values explicitly through a namespace
11@use "foundation";
12
13.button-use {
14  color: foundation.$primary-color;
15}

Grâce à cette différence, vous pouvez considérablement améliorer la maintenabilité et la sécurité en évitant les écrasements accidentels et les confusions de dépendances.

Résumé

@forward est une fonctionnalité essentielle pour un design maintenable. En veillant à « ce qu'il faut exposer et ce qu'il faut cacher comme implémentation interne », votre structure de styles devient plus sûre et plus lisible. En utilisant correctement @use et @forward, vous pouvez clarifier les dépendances et obtenir un design robuste face aux changements.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Modules SASS SASS et BEM

Le `@forward` dans SASS

YouTube Video

Le @forward dans SASS

Qu'est-ce que @forward ?

Différence entre @use et @forward

Pourquoi @forward est-il nécessaire ?

Utilisation de base de @forward

Utilisation de modules qui ont été transmis avec @forward

Combiner plusieurs modules avec @forward

Prévenir les conflits de nommages (as)

Masquer les membres non nécessaires (hide)

Spécification des membres à exposer (show)

@forward ne peut pas être utilisé seul

Exemple de séparation correcte des rôles

La différence fondamentale avec @import

Résumé

YouTube Video

Le `@forward` dans SASS

Qu'est-ce que `@forward` ?

Différence entre `@use` et `@forward`

Pourquoi `@forward` est-il nécessaire ?

Utilisation de base de `@forward`

Utilisation de modules qui ont été transmis avec `@forward`

Combiner plusieurs modules avec `@forward`

Prévenir les conflits de nommages (`as`)

Masquer les membres non nécessaires (`hide`)

Spécification des membres à exposer (`show`)

`@forward` ne peut pas être utilisé seul

La différence fondamentale avec `@import`