Namespace control with @use as in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass code using @use with alias?

Given the Sass partial _colors.scss with:

$primary: #3498db;

And this main Sass file:

@use 'colors' as c;
.button {
  color: c.$primary;
}

What CSS will be generated?

SASS

@use 'colors' as c;
.button {
  color: c.$primary;
}

A

.button {
  color: $primary;
}

B

.button {
  color: #3498db;
}

C

.button {
  color: colors.$primary;
}

D

.button {
  color: c.primary;
}

💡 Hint

Remember that @use with an alias requires referencing variables with the alias and a $ sign.

Using @use 'colors' as c; means you access variables with c.$variableName. The output CSS replaces the variable with its value.

🧠 Conceptual

intermediate

Which statement about @use with alias is true?

Consider the Sass statement: @use 'theme' as t;
Which of the following is correct?

A The alias 't' replaces the variable names inside 'theme'.

B Variables from 'theme' can be accessed directly without prefix.

C The alias 't' is only used for mixins, not variables.

D Variables from 'theme' must be accessed with <code>t.$variableName</code>.

💡 Hint

Think about how @use controls variable access with namespaces.

When you use @use with an alias, all variables, mixins, and functions must be accessed with that alias as a prefix.

❓ selector

advanced

What CSS selector is generated by this Sass code using @use with alias?

Given @use 'buttons' as btn; and the Sass:

.btn-primary {
  @include btn.rounded;
}

Assuming rounded mixin adds border-radius: 5px;, what CSS is output?

SASS

@use 'buttons' as btn;
.btn-primary {
  @include btn.rounded;
}

A

.btn-primary {
  border-radius: btn.5px;
}

B

.btn-primary {
  @include rounded;
}

C

.btn-primary {
  border-radius: 5px;
}

D

.btn-primary {
  border-radius: 0;
}

💡 Hint

Mixins from a used file with alias must be included with the alias prefix.

The mixin rounded from buttons is included with btn.rounded, which outputs border-radius: 5px; inside .btn-primary.

❓ layout

advanced

How does @use with alias affect variable scope in nested Sass files?

If _base.scss defines $spacing: 1rem; and _layout.scss uses @use 'base' as b; and sets margin: b.$spacing;, what happens if $spacing is redefined in _layout.scss?

A b.$spacing always refers to the original $spacing in _base.scss, ignoring local $spacing.

B The local $spacing in _layout.scss overrides b.$spacing for margin.

C An error occurs because $spacing is defined twice.

D The margin uses the global $spacing variable, not b.$spacing.

💡 Hint

Think about how @use creates a namespace that isolates variables.

Using @use with alias creates a namespace. b.$spacing always refers to the variable in _base.scss, unaffected by local variables.

❓ accessibility

expert

How can @use with alias improve accessibility in large Sass projects?

In a large Sass project, how does using @use 'colors' as c; help maintain accessible color schemes?

A It prevents accidental overwriting of color variables, ensuring consistent accessible colors.

B It automatically adjusts colors for contrast based on alias name.

C It merges all color variables into one global namespace, simplifying overrides.

D It disables color variables to force inline styles for accessibility.

💡 Hint

Think about how namespaces help avoid conflicts and maintain consistency.

Using @use with alias creates isolated namespaces, preventing accidental changes to shared color variables, which helps keep color contrast consistent and accessible.

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