@forward directive for re-exporting in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the @forward directive do in Sass?

Choose the best description of what the @forward directive accomplishes in Sass.

A It imports styles from another file and makes them available only in the current file.

B It re-exports styles from another file, making them available to files that import the current file.

C It compiles Sass files into CSS without combining any styles.

D It removes unused CSS rules from the final stylesheet.

💡 Hint

Think about sharing styles through multiple files.

The @forward directive in Sass re-exports styles from one file so that when another file imports the current file, it also gets the forwarded styles. This helps organize and share styles across many files.

📝 Syntax

intermediate

Which @forward syntax correctly forwards all styles from _buttons.scss?

Select the correct Sass code to forward all styles from the file named _buttons.scss.

A @forward './buttons.scss';

B @forward buttons;

C @forward "buttons";

D @forward "./buttons";

💡 Hint

Remember to use quotes and omit the underscore and extension.

When forwarding a Sass partial, you use @forward "filename"; with quotes and without the underscore or file extension.

❓ rendering

advanced

What CSS output results from forwarding variables and mixins?

Given these Sass files, what CSS will be generated when compiling main.scss?

SASS

@forward "colors";

// colors.scss
$primary: #06c;
@mixin button-style {
  background-color: $primary;
  color: white;
}

// main.scss
@use "buttons";
.button {
  @include buttons.button-style;
}

A

.button {
  background-color: #000;
  color: white;
}

B

.button {
  background-color: $primary;
  color: white;
}

C Error: Undefined mixin 'buttons.button-style'.

D

.button {
  background-color: #06c;
  color: white;
}

💡 Hint

Forwarding makes variables and mixins available through the module.

The @forward directive in buttons.scss re-exports the variables and mixins from colors.scss. When main.scss uses buttons, it can access button-style mixin and the variable $primary. The compiled CSS shows the actual color value.

❓ selector

advanced

How does @forward affect selector scope in Sass modules?

If _base.scss defines styles for body and is forwarded by _theme.scss, which file's styles apply when importing theme.scss?

SASS

// base.scss
body { background: white; }

// theme.scss
@forward "base";

// main.scss
@use "theme";

A Styles from base.scss apply because they are forwarded by theme.scss.

B Styles from base.scss do not apply because @forward only shares variables, not selectors.

C Styles from base.scss apply only if explicitly imported in main.scss.

D No styles apply because @forward disables selector output.

💡 Hint

Think about what @forward shares besides variables.

The @forward directive re-exports all styles, variables, and mixins from the forwarded file. So styles defined in base.scss will apply when importing theme.scss.

❓ accessibility

expert

How can @forward help maintain accessible design tokens across Sass files?

You want to keep color variables for accessible contrast consistent across your project. How does using @forward help achieve this?

A By forwarding a single file with color variables, all modules use the same tokens, ensuring consistent accessible colors.

B By forwarding, each file gets a separate copy of variables, allowing different accessible colors per module.

C Forwarding disables variable inheritance, so accessible colors must be redefined in each file.

D Forwarding automatically adjusts colors for accessibility based on user preferences.

💡 Hint

Think about sharing one source of truth for colors.

Using @forward to share a single file with color variables ensures all parts of the project use the same accessible color tokens. This helps maintain consistent contrast and accessibility.

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