@forward directive for re-exporting in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to forward all styles from _buttons.scss.

SASS

@forward '[1]';

Drag options to blanks, or click blank then click option'

A_buttons.scss

Bbuttons.scss

Cbuttons

D_buttons

Attempts:

3 left

💡 Hint

Common Mistakes

Including the underscore in the file name.

Adding the .scss extension.

Using the full file name with extension.

The @forward directive forwards the styles from the partial file _buttons.scss by referencing it without the underscore and extension.

2fill in blank

medium

Complete the code to forward only the mixins from _mixins.scss.

SASS

@forward 'mixins' [1] (mixin);

Drag options to blanks, or click blank then click option'

Aonly

Bshow

Cwith

Dhide

Attempts:

3 left

💡 Hint

Common Mistakes

Using hide or show instead of only.

Omitting the keyword before the member list.

The @forward directive with only keyword forwards only the specified members, here the mixin.

3fill in blank

hard

Fix the error in the forward statement to correctly hide variables.

SASS

@forward 'colors' [1] (variable);

Drag options to blanks, or click blank then click option'

Aonly

Bshow

Cexclude

Dhide

Attempts:

3 left

💡 Hint

Common Mistakes

Using only instead of hide.

Using show which is not valid.

The hide keyword hides the specified members, such as variables, from being forwarded.

4fill in blank

hard

Fill both blanks to forward _theme.scss but hide functions and variables.

SASS

@forward '[1]' [2] (function, variable);

Drag options to blanks, or click blank then click option'

Atheme

Bhide

Conly

Dshow

Attempts:

3 left

💡 Hint

Common Mistakes

Including underscore in file name.

Using only instead of hide.

Use @forward 'theme' hide (function, variable); to forward the file but hide functions and variables.

5fill in blank

hard

Fill all three blanks to forward _layout.scss, only forwarding mixins and functions.

SASS

@forward '[1]' only ([2], [3]);

Drag options to blanks, or click blank then click option'

Alayout

Bmixin

Cfunction

Dhide

Attempts:

3 left

💡 Hint

Common Mistakes

Using hide instead of only.

Mixing order of members inside parentheses.

The correct syntax is @forward 'layout' only (function, mixin); to forward only those members.

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