Il `@forward` in SASS

Questo articolo spiega il @forward in SASS.

Spiegheremo @forward in modo semplice e comprensibile, includendo esempi pratici.

YouTube Video

Il @forward in SASS

Cos'è @forward?

Nel sistema a moduli di SASS, si usano @use e @forward invece di @import. @forward è una funzionalità importante per mantenere pulita l'architettura. È una direttiva utilizzata per 'esporre' variabili, mixin e funzioni definite in altri file. Piuttosto che essere usato da solo, funge da punto di ingresso specificando 'Usa questo modulo da qui.'.

1@forward "variables";

• Questo codice significa 'rendere il contenuto di variables.scss disponibile per l’uso da altri file.'.

Differenza tra @use e @forward

@use e @forward sono entrambe sintassi per la gestione dei moduli, ma i loro scopi sono chiaramente diversi. @use è una direttiva per usare elementi all’interno del file, mentre @forward è una direttiva per rendere elementi disponibili ad altri file.

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 rappresenta le dipendenze necessarie per l’implementazione del file corrente, mentre @forward fa sì che il file funga da entry point API pubblica. Capire questa differenza ti aiuterà a decidere dove usare @forward.

Perché @forward è necessario?

Aggiungendo più file Sass, potresti dover scrivere molte istruzioni @use. Usando @forward, puoi centralizzare tutto in un unico file di ingresso.

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

• In questa struttura, _index.scss funge da 'API pubblica.'.

Uso di base di @forward

Vediamo l’uso di base di @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;

• Invece di usare direttamente questa variabile con @use, le raggruppi con @forward.

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

• A questo punto, _index.scss non contiene nulla; è solo un file di passaggio.

Utilizzare i moduli che sono stati @forwardati

Invece di usare direttamente i singoli file con @use, dal lato consumatore usi solo il file index che ha raggruppato i vari @forward. Questo permette di usarlo come un’interfaccia stabile senza preoccuparsi della struttura interna.

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}

• Con questo design, anche se cambiano le posizioni delle definizioni di variabili o mixin, puoi cambiare la struttura interna senza modificare il codice lato consumatore.

Combinare più moduli con @forward

Nello sviluppo reale, è comune suddividere variabili, mixin e funzioni in base ai loro ruoli. @forward può essere utilizzato più volte, consentendo di raggruppare moduli separati in una sola API pubblica.

Di seguito, forniamo esempi di mixin e funzioni e mostriamo un design che li espone all’esterno come un'unica interfaccia.

 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";

• Esporre solo questo file index verso l’esterno permette di nascondere la struttura interna e fornire un’interfaccia intuitiva ai consumatori.

Prevenire conflitti di nome (as)

Se gli stessi nomi di variabili o mixin sono definiti in moduli diversi, si può specificare as su @forward per aggiungere un prefisso durante l’esposizione ed evitare conflitti di nome.

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

Con questo codice, $primary-color in variables sarà esposto con il seguente nome:.

1// foundation.$var-primary-color

• Questo metodo è un modo per definire chiaramente le regole di design e scalare in sicurezza, ed è una tecnica essenziale soprattutto in progetti su larga scala o librerie condivise.

Nascondere membri non necessari (hide)

I moduli possono contenere variabili o mixin destinati solo all’implementazione interna. Usando hide, puoi escluderli durante la ri-esposizione ed evitare che siano accessibili all’esterno.

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

Con questa configurazione, $debug-color è valido solo all’interno del modulo, impedendo un uso accidentale da parte dei consumatori.

Specificare quali membri esporre (show)

Se vuoi esporre solo determinati mixin o funzioni, usa show. Limitando ciò che viene esposto, è possibile chiarire lo scopo del modulo e l’intento del design.

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

• Usando show in questo modo, diventa subito chiaro quali API sono disponibili ufficialmente.

@forward non può essere usato da solo

È importante ricordare che le variabili @forwardate non possono essere usate all’interno di quel file.

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

• @forward serve solo a 'ri-esporre', mentre 'usare' è il ruolo di @use.

Un esempio di corretta separazione dei ruoli

Nel design a moduli per Sass, è ideale separare chiaramente il livello pubblico (API) dal livello di implementazione. @forward definisce l’API pubblica, mentre @use la consuma dal lato implementazione.

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}

• Con questa struttura, diventa chiaro quali parti sono interfacce pubbliche e quali implementazioni interne, migliorando la trasparenza del design.

La differenza definitiva rispetto a @import

@import espande tutte le definizioni importate nello scope globale. Al contrario, @use e @forward espongono esplicitamente elementi e li rendono accessibili tramite namespace.

 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}

• Grazie a questa differenza, puoi migliorare notevolmente la manutenibilità e la sicurezza evitando sovrascritture involontarie e confusione tra dipendenze.

Riepilogo

@forward è una funzionalità importante che supporta un design manutenibile. Essendo attento a 'cosa esporre e cosa nascondere come implementazione interna', la tua struttura di stile diventa più sicura e leggibile. Usando correttamente @use e @forward, puoi chiarire le dipendenze e ottenere un design robusto ai cambiamenti.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video