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