@use directive for imports in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the @use directive do in Sass?

The @use directive imports another Sass file and makes its variables, mixins, and functions available under a namespace.

beginner

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

You access it with the namespace like this: colors.$color.

intermediate

Why is @use preferred over @import in modern Sass?

@use avoids variable and mixin conflicts by using namespaces and loads files only once, improving clarity and performance.

intermediate

How can you rename a namespace when using @use?

You can rename it with the as keyword, for example: @use 'colors' as c; then access variables like c.$color.

intermediate

What happens if you use @use multiple times for the same file?

Sass loads the file only once, so multiple @use statements for the same file share the same namespace and do not duplicate code.

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

A It imports CSS files only

B It creates a namespace to avoid conflicts

C It allows inline styles

D It disables variables

@use creates a namespace so variables and mixins don’t clash, unlike @import.

How do you access a mixin named button from a file imported as @use 'styles' as s;?

A button()

B s.button()

C @include s.button;

D @include button;

You use @include with the namespace: @include s.button;.

Which keyword lets you rename the namespace when using @use?

A rename

B namespace

C with

D as

The as keyword renames the namespace, e.g., @use 'file' as f;.

If you want to use variables from a file without a namespace, what can you do?

A Use <code>@use 'file' as *;</code>

B Use <code>@import 'file';</code>

C Use <code>@use 'file' no-namespace;</code>

D Use <code>@use 'file' global;</code>

@use 'file' as *; imports all members without a namespace, but it’s less safe.

What happens if you try to import the same file twice with @use?

A The file is loaded once and shared

B An error occurs

C The second import is ignored silently

D The file is loaded twice

@use loads the file once and shares the namespace to avoid duplication.

Explain how the @use directive works in Sass and why it is better than @import.

Think about how variables and mixins are accessed and how duplication is prevented.

Describe how to rename a namespace when importing a file with @use and how to access a variable from it.

Remember the pattern: namespace.variable