@forward directive for re-exporting in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the @forward directive do in Sass?

The <code>@forward</code> directive lets you re-export styles, variables, and mixins from one Sass file to another, making them available to files that import the forwarding file.

intermediate

How is @forward different from @import in Sass?

@forward re-exports members for other files to use, while @import brings styles directly into the current file. @forward helps organize and control what is exposed to users.

intermediate

How do you hide a variable or mixin when using @forward?

Use the hide keyword with @forward to prevent specific members from being re-exported, e.g., @forward 'colors' hide $secret-color;

intermediate

What is the purpose of the as keyword in @forward?

The as keyword lets you rename members when forwarding, for example: @forward 'buttons' as btn-*; prefixes all forwarded members with btn-.

beginner

Can you use @forward multiple times in one file?

Yes, you can use @forward multiple times to re-export members from different Sass files, helping you create a single entry point for many modules.

What does @forward 'colors'; do in a Sass file?

A Re-exports all members from the 'colors' file for others to use

B Imports styles from 'colors' directly into the current file

C Deletes the 'colors' file

D Renames the 'colors' file

@forward re-exports members so other files importing this file can access them.

Which keyword hides members when using @forward?

A skip

B exclude

C remove

D hide

The hide keyword hides specific variables or mixins from being re-exported.

How do you rename forwarded members with @forward?

A Using the <code>as</code> keyword

B Using the <code>rename</code> keyword

C Using the <code>change</code> keyword

D Using the <code>to</code> keyword

The as keyword adds a prefix or changes the name of forwarded members.

Can @forward replace @import in modern Sass projects?

A No, <code>@import</code> is still required

B Yes, <code>@forward</code> is part of the new module system replacing <code>@import</code>

C No, they do completely different things

D Yes, but only for CSS files

@forward is used in the new module system to organize and share code, replacing @import.

What happens if you use @forward multiple times in one file?

A Only the first <code>@forward</code> works

B It causes an error

C You can combine exports from many files into one

D It duplicates styles in the output

Multiple @forward directives let you create a single file that re-exports many modules.

Explain how the @forward directive helps organize Sass code in a project.

Think about how you share variables and mixins across files.

Describe how to hide and rename members when using @forward.

Consider how you might want to keep some things private or change names.