El `@forward` en SASS

Este artículo explica sobre @forward en SASS.

Explicaremos @forward de forma sencilla, incluyendo ejemplos prácticos.

YouTube Video

El @forward en SASS

¿Qué es @forward?

En el sistema de módulos de SASS, se usan @use y @forward en lugar de @import. @forward es una característica importante para mantener tu arquitectura limpia. Es una directiva que se utiliza para 'exponer' variables, mixins y funciones definidas en otros archivos. En lugar de usarse por sí sola, actúa como un punto de entrada especificando: 'Usa este módulo desde aquí.'.

1@forward "variables";

• Este código significa 'poner el contenido de variables.scss disponible para ser utilizado desde otros archivos.'.

Diferencia entre @use y @forward

@use y @forward son ambas sintaxis para manejar módulos, pero sus propósitos son claramente diferentes. @use es una directiva para usar elementos dentro del archivo, y @forward es una directiva para poner elementos a disposición de otros archivos.

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 representa las dependencias necesarias para la implementación del archivo actual, mientras que @forward hace que el archivo funcione como un punto de entrada de API pública. Entender esta diferencia te ayudará a decidir dónde usar @forward.

¿Por qué es necesario @forward?

A medida que agregas más archivos Sass, puede que necesites escribir muchas sentencias @use. Usando @forward, puedes centralizar todo en un solo archivo de entrada.

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

• En esta estructura, _index.scss sirve como la 'API pública'.

Uso básico de @forward

Veamos el uso básico 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;

• En lugar de utilizar directamente esta variable con @use, las agrupas usando @forward.

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

• En este punto, _index.scss no contiene nada; es simplemente un archivo intermediario.

Uso de módulos que han sido @forwardeados

En lugar de usar directamente archivos individuales con @use, en el lado del consumidor solo usas el archivo index que ha agrupado los @forward. Esto te permite usarlo como una interfaz estable sin tener que conocer la estructura 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 este diseño, incluso si cambian las ubicaciones de las variables o mixins, puedes modificar la estructura interna sin tener que cambiar ningún código del lado del consumidor.

Combinando varios módulos con @forward

En el desarrollo real, es común dividir las variables, mixins y funciones según sus funciones. @forward se puede escribir varias veces, lo que te permite agrupar módulos separados en una sola API pública.

A continuación, proporcionamos ejemplos de mixins y funciones y demostramos un diseño que los expone al exterior como una sola interfaz.

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

• Al exponer solo este archivo index hacia afuera, puedes ocultar la estructura interna y proporcionar una interfaz intuitiva para los consumidores.

Prevención de conflictos de nombres (as)

Si el mismo nombre de variable o mixin está definido en varios módulos, puedes especificar as con @forward para añadir un prefijo al exponerlos y así evitar conflictos de nombres.

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

Con este código, $primary-color en variables será expuesto con el siguiente nombre:.

1// foundation.$var-primary-color

• Este método es una forma de definir claramente las reglas de diseño y escalar de forma segura, y es una técnica esencial, especialmente en proyectos grandes o librerías compartidas.

Ocultando miembros innecesarios (hide)

Los módulos pueden contener variables o mixins destinados solo a la implementación interna. Usando hide, puedes excluirlos al re-exponer y evitar que sean accesibles externamente.

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

Con esta configuración, $debug-color es válido solo dentro del módulo, lo que ayuda a evitar el uso accidental por parte de los consumidores.

Especificando qué miembros exponer (show)

Si solo quieres exponer ciertos mixins o funciones, usa show. Al limitar lo que se expone, puedes aclarar el propósito del módulo y la intención de su diseño.

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

• Al usar show de esta manera, queda claro de un vistazo qué APIs están oficialmente disponibles.

@forward no puede usarse por sí solo

Un punto importante es que las variables @forwardeadas no pueden ser usadas dentro de ese archivo.

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

• @forward es solo para 're-exponer', y 'usar' es el rol de @use.

Un ejemplo de separación adecuada de responsabilidades

En el diseño de módulos de Sass, es ideal separar claramente la capa pública (API) y la capa de implementación. @forward define la API pública, y @use la consume desde el lado de la implementación.

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 esta estructura, queda claro qué partes son interfaces públicas y cuáles son implementaciones internas, lo que genera mayor transparencia en el diseño.

La diferencia definitiva con @import

@import expande todas las definiciones importadas al ámbito global. Por otro lado, @use y @forward exponen los elementos explícitamente y se accede a ellos a través de namespaces.

 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}

• Por esta diferencia, puedes mejorar en gran medida la mantenibilidad y seguridad evitando sobreescrituras accidentales y confusión de dependencias.

Resumen

@forward es una característica importante que favorece un diseño mantenible. Siendo consciente de 'qué exponer y qué ocultar como implementación interna', la estructura de tus estilos será más segura y legible. Si usas correctamente @use y @forward, puedes clarificar las dependencias y lograr un diseño robusto frente a los cambios.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video