The @forward Rule and Public Module APIs

The @forward rule re-exports members from another Sass module. It allows a directory or package to provide a centralized entry point instead of requiring every consumer to know the location of each internal file.

For example, an abstracts directory can forward its tokens, functions, and mixins through a single _index.scss file. Consumers then load the index module and access the exposed API through one namespace.

The show and hide options can control which members are re-exported. The as option can rename forwarded members. These capabilities help establish a deliberate public API for a shared design system.

Forwarding is especially useful for Sass libraries, component systems, and multi-package repositories. Internal implementation files can change while consumers continue using the public entry point.

Treat shared Sass modules like APIs

Expose stable tokens and reusable functions intentionally. Keep implementation-specific members private when they are not meant to be consumed outside the module.

Create an Abstracts Barrel Module

// abstracts/_index.scss
@forward "tokens";
@forward "functions";
@forward "mixins";

// main.scss
@use "abstracts" as ui;

.page {
  color: ui.$brand-color;
  padding: ui.spacing(4);
}

💡 The abstracts index forwards public members from the token, function, and mixin modules. The main stylesheet loads that public interface under the ui namespace. The spacing() function must be defined in the forwarded functions module, and $brand-color must be defined in the forwarded token module. File names and directory structure must match the module paths.

Knowledge Check

What is the primary purpose of `@forward`?

The @forward Rule and Public Module APIs

STAY UPDATED WITH BYTES!