@import to @use migration in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why migrate from @import to @use in Sass?

What is the main benefit of using @use instead of @import in Sass?

A It automatically minifies the CSS output.

B It allows importing CSS files directly without processing.

C It disables Sass nesting features for simpler code.

D It prevents variable and mixin conflicts by creating a namespace.

💡 Hint

Think about how Sass handles variables and mixins when importing multiple files.

The @use rule loads Sass files with their own namespace, preventing conflicts between variables and mixins from different files. This is a key improvement over @import, which merges all files into one global scope.

📝 Syntax

intermediate

Correct @use syntax for loading a file

Which option shows the correct way to load a Sass file named _buttons.scss using @use?

A @use 'buttons';

B @use buttons;

C @use 'buttons.scss';

D @use '_buttons.scss';

💡 Hint

Remember that Sass automatically looks for partial files starting with an underscore.

When using @use, you omit the underscore and file extension. Sass finds _buttons.scss automatically.

❓ rendering

advanced

Output difference between @import and @use

Given these files:

// _colors.scss $primary: blue;
// style.scss @import 'colors'; body { color: $primary; }

What happens if you replace @import with @use without changing the rest?

A The code throws an error because $primary is undefined.

B The code compiles but $primary is ignored, so body has no color.

C The code works and colors the body blue.

D The code compiles but colors the body red by default.

💡 Hint

Think about how variables are accessed with @use.

With @use, variables are namespaced. You must write colors.$primary to access it. Using just $primary causes an error.

❓ selector

advanced

How to access variables from a @use module

If you have @use 'colors'; in your Sass file, how do you use the variable $primary defined inside _colors.scss?

A Use <code>$primary</code> directly without prefix.

B Use <code>colors.$primary</code> to access the variable.

C Use <code>@include colors.$primary;</code> to access it.

D Use <code>colors-primary</code> as a CSS class.

💡 Hint

Remember that @use creates a namespace.

Variables inside a @use module must be accessed with the module name as a prefix, like colors.$primary.

❓ accessibility

expert

Ensuring accessibility when migrating from @import to @use

When migrating Sass files from @import to @use, what should you do to maintain accessible color contrast in your CSS variables?

A Ignore variable changes since <code>@use</code> does not affect accessibility.

B Remove all color variables and hardcode colors in CSS for better accessibility.

C Update all variable references to use the module namespace and verify color contrast ratios remain accessible.

D Use <code>@forward</code> instead of <code>@use</code> to keep variables global.

💡 Hint

Think about how variable renaming might affect your styles and accessibility.

When migrating, you must update variable references to include the namespace. This ensures your styles use the correct colors. Then, check that color contrast ratios still meet accessibility standards.