iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

@forward

By · Reviewed & last updated · Part of Sass Tutorial

@@forward re-exports another module’s members from your file. The classic use: build a single “index” partial that exposes the whole API of a folder.

Forward, with prefix, with show / hide

EXAMPLE
// src/tokens/_colors.scss
$brand:  #04AA6D;
$danger: #c33;

// src/tokens/_spacing.scss
$gap-1: 0.25rem;
$gap-2: 0.5rem;

// src/tokens/_index.scss — re-export everything
@forward 'colors';
@forward 'spacing';

// src/main.scss — now one import gets ALL tokens
@use 'tokens';

.btn {
    background: tokens.$brand;
    padding:    tokens.$gap-2;
}

// Optional — prefix forwarded members
// src/tokens/_index.scss
@forward 'colors'  as color-*;
@forward 'spacing' as space-*;

// Now consumers reference 'tokens.color-brand', 'tokens.space-gap-2'.

// Show / hide — control which members get re-exported
@forward 'colors'  show $brand;            // only $brand surfaces
@forward 'spacing' hide $internal-thing;    // everything except $internal-thing

// Configure on forward — override defaults the inner module declared with !default
// src/tokens/_colors.scss
$brand: #04AA6D !default;

// src/tokens/_index.scss
@forward 'colors' with (
    $brand: #2965F1,                // override
);

Why it matters

@use + @forward are the modern, namespace-safe replacement for @import. A clean _index.scss per folder is how Sass codebases stay organised at scale.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// _index.scss in a folder
@forward 'colors';
@forward 'typography';
// Consumer: @use 'theme';
Try it Yourself »

Discussion

Loading…