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

Practice

1. What is the main purpose of the @use directive in Sass?

easy

A. To import Sass files with a namespace to avoid conflicts

B. To directly copy CSS styles without any namespace

C. To run JavaScript code inside Sass files

D. To export variables from Sass files

Solution

1. Step 1: Understand the role of @use

   The @use directive imports Sass files and applies a namespace to their contents.

2. Step 2: Compare with other import methods

   Unlike @import, @use avoids naming conflicts by requiring namespace prefixes.

3. Final Answer:

   To import Sass files with a namespace to avoid conflicts -> Option A

4. Quick Check:

   @use adds namespace = C [OK]

Hint: Remember: @use always adds a namespace [OK]

Common Mistakes:

• Thinking @use copies styles without namespace
• Confusing @use with JavaScript execution
• Believing @use exports variables

2. Which of the following is the correct syntax to import a Sass file named colors.scss using @use?

easy

A. @use 'colors';

B. @use colors.scss;

C. @use "colors.scss";

D. @use colors;

Solution

1. Step 1: Check correct quoting and file extension

   The @use directive requires the file path as a string without the extension, usually quoted.

2. Step 2: Validate options

   @use 'colors'; uses quotes and omits the extension, which is correct. Options B and C include the extension incorrectly or wrong quotes. @use colors; lacks quotes.

3. Final Answer:

   @use 'colors'; -> Option A

4. Quick Check:

   Quotes + no extension = D [OK]

Hint: Use quotes and omit .scss extension in @use [OK]

Common Mistakes:

• Including the .scss extension inside @use
• Not using quotes around the file name
• Using double quotes inconsistently

3. Given the following Sass files, what will be the color of the h1 text?

@use 'colors';
h1 {
  color: colors.$primary;
}

// colors.scss
$primary: blue;
$secondary: green;

medium

A. green

B. black

C. red

D. blue

Solution

1. Step 1: Identify the imported variables

   The @use 'colors'; imports variables with the namespace colors. The variable $primary is set to blue.

2. Step 2: Check the usage in h1

   The color is set to colors.$primary, which refers to blue.

3. Final Answer:

   blue -> Option D

4. Quick Check:

   Namespace + variable = blue [OK]

Hint: Namespace.variable accesses imported values [OK]

Common Mistakes:

• Forgetting to use the namespace prefix
• Confusing $primary with $secondary
• Assuming default color without import

4. What is wrong with this Sass code?

@use 'theme';
h1 {
  color: $main-color;
}

// theme.scss
$main-color: red;

medium

A. The file path must include the .scss extension

B. Using as * is invalid syntax in @use

C. Variables must be accessed with namespace prefix unless configured

D. Variables cannot be used inside selectors

Solution

1. Step 1: Understand @use namespace behavior

   By default, variables must be accessed with the namespace prefix unless as * is used to remove it.

2. Step 2: Check the code usage

   The code uses @use 'theme'; without as *, so variables must be accessed with the theme. prefix, but $main-color is used without it, causing an undefined variable error.

3. Step 3: Identify the actual problem

   Without as *, the prefix is required, so Variables must be accessed with namespace prefix unless configured identifies the issue.

4. Final Answer:

   Variables must be accessed with namespace prefix unless configured -> Option C

5. Quick Check:

   Default namespace prefix required = A [OK]

Hint: Use namespace or as * to access variables directly [OK]

Common Mistakes:

• Thinking as * is invalid syntax
• Forgetting to prefix variables without as *
• Including .scss extension in @use

5. You want to import variables.scss but rename its namespace to vars and override the variable $font-size to 1.5rem. Which @use syntax is correct?

hard

A. @use 'variables' as vars ($font-size: 1.5rem);

B. @use 'variables' as vars with ($font-size: 1.5rem);

C. @use 'variables' with ($font-size: 1.5rem) as vars;

D. @use 'variables' rename vars with ($font-size: 1.5rem);

Solution

1. Step 1: Recall @use syntax for renaming and configuring

   The correct syntax is @use 'file' as namespace with (variable overrides);.

2. Step 2: Match options to syntax

   @use 'variables' as vars with ($font-size: 1.5rem); matches the correct order and syntax. Options B, C, and D have incorrect order or keywords.

3. Final Answer:

   @use 'variables' as vars with ($font-size: 1.5rem); -> Option B

4. Quick Check:

   Namespace + with (overrides) = A [OK]

Hint: Use as then with for renaming and overrides [OK]

Common Mistakes:

• Swapping as and with order
• Using invalid keywords like rename
• Omitting parentheses around overrides