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:

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

Practice

1. What does the @use 'colors' as c; statement do in Sass?

easy

A. It imports the 'colors' file and merges all variables globally.

B. It imports the 'colors' file and renames its namespace to 'c'.

C. It imports the 'colors' file without any namespace.

D. It imports the 'colors' file and disables all variables.

Solution

1. Step 1: Understand the @use rule

   The @use rule imports a Sass file and creates a namespace for its variables and mixins.

2. Step 2: Analyze the as c part

   The as c renames the namespace from the default (usually the filename) to c.

3. Final Answer:

   It imports the 'colors' file and renames its namespace to 'c'. -> Option B

4. Quick Check:

   @use with as renames namespace [OK]

Hint: Remember: @use 'file' as alias; renames namespace [OK]

Common Mistakes:

• Thinking @use removes the namespace
• Confusing @use with @import
• Assuming variables become global without namespace

2. Which of the following is the correct syntax to import a Sass file buttons.scss with namespace btn?

easy

A. @use buttons as btn;

B. @use 'buttons.scss' btn;

C. @use 'buttons' as btn;

D. @use 'buttons' btn;

Solution

1. Step 1: Check the @use syntax

   The correct syntax requires quotes around the filename and the keyword as before the alias.

2. Step 2: Validate each option

   @use 'buttons' as btn; uses quotes and as correctly. Options A, C, and D miss quotes or the as keyword.

3. Final Answer:

   @use 'buttons' as btn; -> Option C

4. Quick Check:

   Quotes + as keyword = correct syntax [OK]

Hint: Always use quotes and 'as' for alias in @use [OK]

Common Mistakes:

• Omitting quotes around filename
• Forgetting the 'as' keyword
• Adding file extension inside quotes unnecessarily

3. Given @use 'theme/colors' as c; and the file colors.scss contains $primary: #0055ff;, what is the correct way to use $primary in your styles?

medium

A. color: c.$primary;

B. color: $primary;

C. color: colors.$primary;

D. color: theme.colors.$primary;

Solution

1. Step 1: Understand namespace usage

   When using @use 'file' as alias;, variables must be accessed with alias.variable.

2. Step 2: Apply alias to variable

   Since the alias is c, the variable $primary is accessed as c.$primary.

3. Final Answer:

   color: c.$primary; -> Option A

4. Quick Check:

   Use alias.variable to access imported variables [OK]

Hint: Use alias.variable to access imported Sass variables [OK]

Common Mistakes:

• Using variable without alias
• Using original filename as namespace instead of alias
• Trying to chain namespaces incorrectly

4. What is wrong with this Sass code?

@use 'utils' as u;
.button { color: $main-color; }

medium

A. Variable $main-color is used without namespace prefix.

B. Missing semicolon after @use statement.

C. The alias 'u' cannot be a single letter.

D. The file 'utils' cannot be used with @use.

Solution

1. Step 1: Verify the @use syntax

   The @use 'utils' as u; statement correctly imports the file with namespace u.

2. Step 2: Check variable usage

   Since @use 'utils' as u; creates a namespace u, variables inside must be accessed as u.$main-color. Using $main-color alone causes an error.

3. Final Answer:

   Variable $main-color is used without namespace prefix. -> Option A

4. Quick Check:

   Variables need namespace prefix after @use [OK]

Hint: Always prefix variables with alias after @use [OK]

Common Mistakes:

• Forgetting to prefix variables with alias
• Assuming @use imports variables globally
• Thinking alias must be longer than one letter

5. You have two Sass files: colors.scss with $primary: #333; and buttons.scss with $primary: #555;. How do you import both files in main.scss using @use with aliases c and b to avoid naming conflicts and use both $primary variables?

hard

A. @import 'colors'; @import 'buttons'; .btn { color: $primary; background: $primary; }

B. @use 'colors'; @use 'buttons'; .btn { color: $primary; background: $primary; }

C. @use 'colors' as colors; @use 'buttons' as colors; .btn { color: colors.$primary; }

D. @use 'colors' as c; @use 'buttons' as b; .btn { color: b.$primary; background: c.$primary; }

Solution

1. Step 1: Use @use with different aliases

   To avoid naming conflicts, import each file with a unique alias: c for colors and b for buttons.

2. Step 2: Access variables with their aliases

   Use b.$primary for button color and c.$primary for background color to distinguish them.

3. Final Answer:

   @use 'colors' as c; @use 'buttons' as b; .btn { color: b.$primary; background: c.$primary; } -> Option D

4. Quick Check:

   Use unique aliases to avoid conflicts [OK]

Hint: Use different aliases to avoid variable name clashes [OK]

Common Mistakes:

• Using same alias for both imports
• Using @import instead of @use
• Accessing variables without alias prefix