@forward directive for re-exporting in SASS

Introduction

The @forward directive lets you share styles from one Sass file to another easily. It helps organize your styles by re-exporting them.

You want to create a single file that gathers styles from many Sass files.

You want to hide some details but still share main styles with others.

You want to keep your styles organized in small files but use them together.

You want to avoid repeating imports in many files by forwarding them once.

Syntax

SASS

@forward "filename";

Use quotes around the filename, just like with @use.

The filename should be a Sass partial or full Sass file without the extension.

Examples

This forwards all styles from _colors.scss, making them available to other files that @use this file.

SASS

@forward "colors";

This forwards styles from _buttons.scss, so other files can use them by @use-ing this file.

SASS

@forward "buttons";

This forwards mixins from _mixins.scss for reuse.

SASS

@forward "mixins";

Sample Program

This example shows a main Sass file forwarding variables from _colors.scss. The button style uses the forwarded $primary-color variable.

SASS

@forward "colors";

.button {
  background-color: $primary-color;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

/* _colors.scss file content:
$primary-color: #3498db;
*/

Important Notes

Forwarding is different from importing: @forward re-exports styles for others to use, while @use imports styles for the current file.

You can forward multiple files in one file to create a style library.

Use partial files (starting with underscore) for files you forward.

Summary

@forward shares styles from one Sass file to another.

It helps organize and reuse styles without repeating imports.

Use it to create clean, maintainable style libraries.