The @forward Rule

What Does @forward Do?

@forward makes another module's public members (variables, mixins, and functions) available to anyone who loads the file containing the @forward statement, without those members becoming directly usable inside the forwarding file itself (unless you also @use it there).

This is the mechanism behind barrel files: a single _index.scss that forwards every partial in a folder, so the rest of the project can load the whole folder with one @use statement.

// components/_buttons.scss
$radius: 6px;

// components/_index.scss
@forward 'buttons';

// main.scss
@use 'components';

.btn {
  border-radius: components.$radius;
}

main.scss never has to know that $radius actually lives inside _buttons.scss, it just loads components and gets everything forwarded through the barrel file.

@forward Syntax Variations

@forward 'path';
@forward 'path' as prefix-*;
@forward 'path' show $var, mixin-name;
@forward 'path' hide $private-var;

• @forward 'path'; re-exports every public member from the given file.
• as prefix-* adds a prefix to every forwarded member's name.
• show allowlists specific members to forward, hiding everything else.
• hide blocklists specific members, forwarding everything else.

@forward Rule Cheatsheet

Common forwarding patterns for building barrel files and public APIs.

@forward vs @use

@use makes members available inside the current file, for you to consume directly. @forward makes members available to files that load the current file, without making them directly usable inside the forwarding file itself. Many barrel files use @forward exclusively and never reference the members they forward.

• @use = "I want to consume this module's members here."
• @forward = "I want to pass this module's members through to whoever loads me."
• A file can do both: @forward to re-export, and separately @use if it also needs to consume those members locally.

Prefixing Forwarded Members

The as prefix-* clause is useful for avoiding naming collisions when forwarding multiple files with similarly named members into one namespace, every forwarded name gets the given prefix automatically.

// _index.scss
@forward 'buttons' as btn-*;
@forward 'cards' as card-*;

// consumer.scss
@use 'components';

.btn {
  border-radius: components.$btn-radius;
}

Controlling Visibility With show and hide

show and hide let a barrel file expose a curated public API instead of forwarding every internal detail. This keeps implementation variables (like intermediate calculation values) private to the module that defines them.

// _typography.scss
$_line-height-ratio: 1.5; // internal, prefixed with underscore
$font-size-base: 16px;

@forward 'typography' show $font-size-base;

Names prefixed with _ or - are already private and never forwarded, regardless of show/hide.

Common Mistakes

• Expecting @forward alone to let the forwarding file use the members itself; forwarding does not also import for local use.
• Forgetting that private members (prefixed with _ or -) can never be forwarded, even with an explicit show.
• Using show and hide on the same @forward statement, which is not allowed, choose one per statement.
• Skipping barrel files entirely and requiring every consumer to @use dozens of individual partials directly.

Key Takeaways

• @forward re-exports a module's public members to whoever loads the forwarding file.
• Barrel files (_index.scss) commonly use @forward to expose an entire folder through one entry point.
• as prefix-* renames forwarded members; show/hide curate exactly which members are exposed.
• Members prefixed with _ or - are private and are never forwarded.