The @forward Rule
Re-export a file's members so others can use them through one entry point.
Syntax
@forward 'src/list'; @forward 'src/list' show list-reset;@forward makes another module's members available to files that @use the current file, without exposing them locally. It is how you build a library with a single public entry point (often called an index file).
Controlling what is forwarded
show— forward only the listed members.hide— forward everything except the listed members.as prefix-*— add a prefix to every forwarded name.
Example
// abstracts/_index.scss (the public entry point)
@forward 'variables';
@forward 'mixins';
@forward 'functions';
// main.scss — one import gets everything
@use 'abstracts' as *;
.btn {
color: $primary; // from variables
@include flex-center; // from mixins
}When to use it
- A library uses @forward in an index.scss file to re-export all its sub-modules so consumers can load the entire library with one @use statement.
- A design system maintainer @forward-s token and mixin partials through a single _index.scss entry point, hiding internal file organization from consumers.
- A developer @forward-s a third-party color module with a prefix so downstream files access it as colors.brand-primary rather than bare variable names.
More examples
Re-exporting modules via @forward
An index file @forward-s three sub-modules so consumers only need one @use statement to access the entire design system.
// design-system/_index.scss
@forward 'tokens';
@forward 'mixins';
@forward 'functions';
// app/main.scss
@use 'design-system'; // loads all threeForwarding with a prefix
Adds a prefix to all forwarded members so their names are unique and clearly attributed when accessed by consumers.
// _index.scss
@forward 'tokens' as token-*;
// main.scss
@use 'index';
.btn { color: index.token-primary; }Hide internals with @forward show
Uses the hide keyword to exclude private implementation variables from the public API when forwarding a module.
// _colors.scss (has $primary, $secondary, $_internal)
// _index.scss
@forward 'colors' hide $_internal;
// Only $primary and $secondary are visible to consumers.
Discussion