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.