The @forward Rule for Library Authors

The `@forward` rule is designed for building SASS libraries and design systems that re-export members from multiple internal files through a single public entry point. When a file uses `@forward "partial"`, members from that partial become available to any file that `@use`s the forwarding file, without the forwarding file gaining access to those members itself. A typical use case is an `_index.scss` barrel file inside a `abstracts/` directory that forwards all the tokens, mixins, and functions. Consumers of the library then only need `@use "abstracts"` to access everything. This keeps the internal organisation hidden from consumers and lets you refactor the internal structure without breaking the public API. `@forward` supports `show` and `hide` clauses to control exactly which members are re-exported: `@forward "variables" show $primary, $secondary` exports only those two variables. It also supports a `with` clause for overriding `!default` variables at the point of forwarding, which is the mechanism recommended by the SASS team for library configuration.

Example

// ── abstracts/_index.scss — barrel file using @forward ────────────────────────

// Forward all public members from each internal partial
@forward 'variables';
@forward 'functions';
@forward 'mixins';

// Forward only specific members from colors partial
@forward 'colors' show $color-primary, $color-secondary, $color-accent;

// Forward with a prefix so consumers know where members come from
@forward 'breakpoints' as bp-*;
// → $bp-sm, $bp-md, $bp-lg instead of $sm, $md, $lg

// ── abstracts/_variables.scss (internal, not meant to be used directly) ───────

$color-primary  : #3498db !default;
$color-secondary: #2ecc71 !default;
$font-size-base : 1rem    !default;

// ── Configuring a library via @use with () ────────────────────────────────────

// Consumer overrides !default variables at load time
@use 'abstracts' with (
    $color-primary  : #8e44ad,
    $color-secondary: #d35400,
    $font-size-base : 1.125rem
);

.page-title {
    color    : abstracts.$color-primary;
    font-size: abstracts.$font-size-base * 2;
}

// ── main.scss — clean entry point using the barrel ───────────────────────────

@use 'abstracts';  // single line loads all tokens, functions, mixins

.hero {
    background: abstracts.$color-primary;
    font-size : abstracts.$font-size-base;
}

HTML

Full Editor

Related Resources

SASS / SCSS Reference

Complete tag & property list

SASS / SCSS How-To Guides

Step-by-step practical guides

SASS / SCSS Exercises

Practice what you've learned