Directiva @forward

La directiva @forward sirve para reexportar variables, mixins y funciones desde un archivo Sass hacia otros. No genera CSS por sí sola y no aplica estilos automáticamente.

El problema que resuelve

Antes, con @import, todo se cargaba de forma global. Eso causaba:

• nombres pisados
• dependencias ocultas
• archivos difíciles de mantener

@forward evita eso haciendo que todo sea explícito.

Ejemplo básico

Para la siguiente estructura de archivos:

FOLDERS

Sin archivo x

          
        
          $primary: #0055ff;
$secondary: #ff5500;

        
      

          
        
          @mixin heading {
  font-weight: bold;
  line-height: 1.2;
}

        
      

          
        
          //  Este archivo no define nada, solo reenvía lo que importa.
@forward "colors";
@forward "typography";

        
      

Selecciona un archivo para ver su contenido

Uso desde otro archivo

FOLDERS

Sin archivo x

          
        
          $primary: #0055ff;
$secondary: #ff5500;

        
      

          
        
          @mixin heading {
  font-weight: bold;
  line-height: 1.2;
}

        
      

          
        
          //  Este archivo no define nada, solo reenvía lo que importa.
@forward "colors";
@forward "typography";

        
      

          
        
          @use "styles";

// Ahora tenés acceso a:

.button {
  background: styles.$primary;
}

.title {
  @include styles.heading;
}

        
      

Selecciona un archivo para ver su contenido

@forward no es @use

• @use es para consumir cosas
• @forward es para exponer cosas

Normalmente:

• @forward se usa en archivos index.scss
• @use se usa en los estilos reales

Controlar qué se expone

Mostrar solo lo necesario:

@forward "colors" show $primary;

Solo $primary queda disponible.

Ocultar cosas internas:

@forward "colors" hide $secondary;

Todo menos $secondary.

Regla importante

@forward no hace que puedas usar las cosas dentro del mismo archivo. Su propósito principal es reexportar variables, mixins o funciones para que otros archivos puedan usarlas sin necesidad de importar cada archivo por separado.

Por eso, su uso está especialmente pensado para archivos _index.scss, donde solo se reexportan cosas y no se añaden reglas adicionales. Así, otros archivos pueden usar todo lo que reexporta _index.scss con un solo @use.

Patrón recomendado

@forward "colors";
@forward "typography";
@forward "spacing";

@use "styles";

Un solo punto de entrada, ordenado y mantenible.

---
title: 'Esquema visual de @forward'
---
flowchart TD
    subgraph Styles["<font size='4'>📁 Carpeta styles</font>"]
        Colors["fa:fa-file-code _colors.scss"]
        Spacing["fa:fa-file-code _spacing.scss"]
        Typography["fa:fa-file-code _typography.scss"]
        Index["fa:fa-file-code _index.scss<br/><div align='left'>@forward colors<br/>@forward typography<br/>@forward spacing</div>"]
    end

    App["fa:fa-file-code main.scss<br/>@use styles"]

    Colors --> Index
    Typography --> Index
    Spacing --> Index
    Index --> App

Resumen rápido

• @forward expone
• @use consume
• No hay variables globales
• Todo tiene namespace
• Ideal para librerías y proyectos grandes