Namespace control with @use as in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the @use rule do in Sass?

The @use rule loads another Sass file and makes its variables, mixins, and functions available with a namespace to avoid name conflicts.

beginner

How do you change the namespace when using @use in Sass?

You can change the namespace by adding as newName after the file path, like @use 'colors' as c; which lets you access items with c.$variable.

beginner

Why is namespace control important in Sass?

Namespace control helps avoid naming conflicts when multiple Sass files have variables or mixins with the same name, keeping styles organized and clear.

intermediate

What happens if you use @use 'file' as *; in Sass?

Using as * imports all members without a namespace, making variables and mixins available directly but risking name conflicts.

beginner

Show an example of using @use with a custom namespace.

Example:<br>

@use 'colors' as c;

.button {
  color: c.$primary-color;
}

This uses c as the namespace for the colors file.

What does @use 'variables' as v; do in Sass?

A Loads variables with the namespace 'v'

B Loads variables without any namespace

C Imports variables as global variables

D Removes the variables file

The @use rule with as v loads the file with the namespace 'v', so you access variables like v.$variable-name.

Which of these is a risk when using @use 'file' as *;?

A Name conflicts between variables

B File not found error

C Slower compilation

D Variables become private

Using as * imports all members without a namespace, which can cause name conflicts if different files have the same variable names.

Why prefer @use over @import in Sass?

A They are exactly the same

B <code>@import</code> is faster

C <code>@use</code> supports namespaces and avoids conflicts

D <code>@use</code> is deprecated

@use creates namespaces and avoids variable conflicts, while @import can cause conflicts and is deprecated.

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

A $color

B t.$color

C theme.$color

D color

When loaded with namespace t, you access variables as t.$color.

What is the default namespace when using @use 'file'; without as?

A The word 'use'

B No namespace

C Global namespace

D The file name

By default, the namespace is the file name, so you access members with fileName.$variable.

Explain how namespace control works with @use as in Sass and why it is useful.

Think about how you keep things organized when you have many files with similar names.

Describe the difference between using @use 'file' as namespace; and @use 'file' as *; in Sass.

Consider how you call variables after importing.