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