@use directive for imports in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the @use directive syntax

Which of the following is the correct way to import a Sass module named colors using the @use directive?

A @use colors;

B @import 'colors';

C @use 'colors';

D @use('colors');

💡 Hint

Remember that @use requires quotes around the module name and no parentheses.

The @use directive imports a Sass module and requires the module name to be a string in quotes without parentheses. Option C is correct. Option C uses the old @import syntax. Option C misses quotes, causing a syntax error. Option C uses parentheses which are invalid.

📝 Syntax

intermediate

What error does this Sass code raise?

Consider this Sass code:

@use 'variables' as *;

What error will this code produce when compiled?

SASS

@use 'variables' as *;

A No error, imports all variables without namespace

B Warning: Deprecated syntax

C RuntimeError: Module not found

D SyntaxError: Invalid namespace alias '*'

💡 Hint

The as * syntax is valid and imports members without requiring a namespace prefix.

The @use directive supports as * as a special wildcard to import all members into the current namespace without a prefix. No error occurs; this is valid syntax. Option D is correct. Option D is incorrect because * is allowed. @forward serves a different purpose.

❓ rendering

advanced

What color will the button background be?

Given these Sass files:

_colors.scss

$primary-color: #3498db;

styles.scss

@use 'colors';

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

What color will the button background be when rendered in the browser?

SASS

@use 'colors';

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

A A blue color (#3498db)

B Transparent (no color applied)

C Black (default fallback)

D Compilation error due to wrong variable reference

💡 Hint

Variables imported with @use require the namespace prefix.

The @use directive imports the $primary-color variable under the namespace colors. Accessing it as colors.$primary-color is correct, so the button background will be the blue color #3498db.

❓ selector

advanced

Which option correctly changes the namespace alias?

You want to import the mixins module but use the namespace m instead of mixins. Which @use statement is correct?

A @use 'mixins' with m;

B @use 'mixins' as m;

C @use 'mixins' namespace m;

D @use 'mixins' alias m;

💡 Hint

The as keyword changes the namespace alias.

The correct syntax to rename the namespace is @use 'module' as alias;. Option B uses this correctly. Other options use invalid keywords causing syntax errors.

❓ accessibility

expert

How does using @use improve maintainability and accessibility in large Sass projects?

Select the best explanation of how the @use directive helps maintain accessibility and clarity in large Sass codebases.

A <p>By enforcing namespaces, <code>@use</code> prevents variable and mixin name conflicts, making styles easier to manage and reducing errors that can affect accessibility.</p>

B <p><code>@use</code> automatically adds ARIA attributes to components for accessibility.</p>

C <p><code>@use</code> compiles CSS faster, improving page load times and accessibility.</p>

D <p><code>@use</code> disables unused CSS rules to reduce clutter and improve screen reader performance.</p>

💡 Hint

Think about how namespaces help avoid confusion and bugs.

The @use directive enforces namespaces, which helps avoid naming conflicts in variables and mixins. This clarity reduces bugs and unintended style overrides that could harm accessibility. The other options describe features @use does not provide.