@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.

Practice

1. What is the main purpose of the @forward directive in Sass?

easy

A. To share styles from one Sass file to another without importing repeatedly

B. To import CSS files directly into Sass

C. To compile Sass files into CSS

D. To define variables inside a Sass file

Solution

1. Step 1: Understand the role of @forward

   The @forward directive allows one Sass file to share its styles with another file, acting like a re-export.

2. Step 2: Compare with other options

   Options B, C, and D describe different Sass features: importing CSS, compiling Sass, and defining variables, which are not the main purpose of @forward.

3. Final Answer:

   To share styles from one Sass file to another without importing repeatedly -> Option A

4. Quick Check:

   @forward shares styles = A [OK]

Hint: Remember: @forward re-exports styles, not imports or compiles [OK]

Common Mistakes:

• Confusing @forward with @import
• Thinking @forward compiles Sass
• Assuming @forward defines variables

2. Which of the following is the correct syntax to forward a Sass file named _buttons.scss from _index.scss?

easy

A. @use "buttons";

B. @forward "_buttons.scss";

C. @forward "buttons";

D. @import "buttons";

Solution

1. Step 1: Identify correct syntax for @forward

   The @forward directive uses the file name without underscore and extension, so @forward "buttons"; is correct.

2. Step 2: Eliminate other options

   @forward "_buttons.scss"; incorrectly includes underscore and extension. @import "buttons"; uses @import, and @use "buttons"; uses @use, both different directives.

3. Final Answer:

   @forward "buttons"; -> Option C

4. Quick Check:

   Forward syntax excludes underscore and extension = D [OK]

Hint: Use file name without underscore or extension in @forward [OK]

Common Mistakes:

• Including underscore or .scss extension in @forward
• Confusing @forward with @import or @use
• Using wrong quotes or missing semicolon

3. Given these Sass files:

// _colors.scss
$primary: blue;

// _index.scss
@forward "colors";

// main.scss
@use "index";
.button {
  color: index.$primary;
}

What color will the button text be when compiled to CSS?

medium

A. undefined variable error

B. index.$primary

C. blue

D. red

Solution

1. Step 1: Understand @forward and @use interaction

   The @forward "colors"; in _index.scss re-exports mixins, functions, and styles from colors, but NOT variables. Variables are never forwarded.

2. Step 2: Check variable access

   index.$primary is undefined because variables aren't forwarded. Compilation fails with an undefined variable error.

3. Final Answer:

   undefined variable error -> Option A

4. Quick Check:

   @forward does NOT forward variables = A [OK]

Hint: @forward shares mixins/functions/styles, NOT variables [OK]

Common Mistakes:

• Thinking @forward forwards variables
• Thinking @forward imports variables directly
• Confusing variable name with string

4. Consider this Sass code in _index.scss:

@forward "buttons";
@forward "buttons";

What will happen when compiling this Sass file?

medium

A. Styles from buttons are forwarded twice without error

B. Compilation error due to duplicate @forward

C. Only the first @forward works, second is ignored

D. Warning about duplicate forwarding but compiles

Solution

1. Step 1: Identify duplicate @forward usage

   Using @forward twice for the same file causes a compilation error because Sass forbids forwarding the same module multiple times.

2. Step 2: Understand Sass error behavior

   Sass will stop compiling and show an error about duplicate forwarding, so no styles are output.

3. Final Answer:

   Compilation error due to duplicate @forward -> Option B

4. Quick Check:

   Duplicate @forward causes error = B [OK]

Hint: Avoid forwarding the same file twice to prevent errors [OK]

Common Mistakes:

• Assuming duplicate forwards are ignored
• Expecting warnings instead of errors
• Confusing @forward with multiple imports

5. You have three Sass files:

// _colors.scss
$primary: blue;

// _buttons.scss
@forward "colors";

// _index.scss
@forward "buttons";

// main.scss
@use "index";
.button-special {
  color: index.$primary;
}

Why does main.scss fail to compile with an undefined variable error for index.$primary?

hard

A. Because _colors.scss is missing from @use in main.scss

B. Because @use cannot access variables from forwarded files

C. Because @forward only works with mixins, not variables

D. Because $primary is not forwarded from _buttons.scss explicitly

Solution

1. Step 1: Trace variable forwarding chain

   The variable $primary is defined in _colors.scss. _buttons.scss forwards colors but does not re-forward $primary explicitly to _index.scss.

2. Step 2: Understand forwarding visibility

   Since _buttons.scss forwards colors, but _index.scss only forwards buttons, $primary is not visible to main.scss via index namespace.

3. Final Answer:

   Because $primary is not forwarded from _buttons.scss explicitly -> Option D

4. Quick Check:

   Forward chain must include variable = A [OK]

Hint: Forward variables explicitly through each file to share them [OK]

Common Mistakes:

• Assuming forwarding is automatic through all layers
• Confusing @use with @forward behavior
• Thinking @forward shares all contents without explicit forwarding