@import to @use migration in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main difference between @import and @use in Sass?

@import includes styles multiple times and can cause conflicts. @use loads styles once and keeps them in a namespace to avoid conflicts.

beginner

How do you replace <code>@import 'colors';</code> with <code>@use</code>?

Use @use 'colors'; instead. This loads the colors file once and requires you to prefix variables or mixins with colors..

intermediate

Why does @use help avoid variable conflicts?

Because @use creates a namespace for the imported file. You must write namespace.$variable, so variables with the same name in different files don’t clash.

intermediate

How can you shorten the namespace when using @use?

You can add as * to @use like @use 'colors' as *; to use variables without the namespace prefix, but use it carefully to avoid conflicts.

intermediate

What should you do if you want to share variables or mixins globally with @use?

Create a separate file for shared variables and @use it in each file that needs them. This keeps your code organized and avoids duplication.

Which Sass directive loads a file only once and uses namespaces?

A @use

B @import

C @forward

D @mixin

@use loads a file once and creates a namespace to avoid conflicts.

How do you access a variable named $color from a file loaded with @use 'theme';?

A $color

B theme.color

C theme.$color

D theme.$color()

You must prefix the variable with the namespace: theme.$color.

What does @use 'colors' as *; do?

A Imports colors with the namespace 'colors'

B Imports colors without any namespace

C Imports colors multiple times

D Imports colors as a mixin

Using as * removes the namespace, so you can use variables directly.

Why should you avoid using @import in new Sass projects?

A It is required for variables

B It is faster than @use

C It supports namespaces

D It is deprecated and can cause duplicate styles

@import is deprecated and can cause duplicate styles and conflicts.

Which directive allows you to re-export styles from one file to another in Sass?

A @forward

B @use

C @import

D @mixin

@forward lets you re-export styles from one file to another.

Explain how to migrate a Sass project from using @import to @use. What are the key steps and benefits?

Think about how @use changes the way you access variables and why it is better.

Describe how namespaces work in Sass when using @use. Why are they important?

Consider how multiple files can have the same variable names.