Namespace control with @use as in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the file with a namespace.

SASS

@use 'colors' [1];

Drag options to blanks, or click blank then click option'

Aas *

Bas colors

Cwith colors

Dnamespace colors

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'with' instead of 'as' for namespace.

Using 'as *' which imports without namespace.

Trying to use 'namespace' keyword which is invalid.

The correct syntax to import a Sass file with a namespace is using '@use' followed by 'as' and the namespace name.

2fill in blank

medium

Complete the code to use the color variable from the namespace.

SASS

body { color: colors.[1]; }

Drag options to blanks, or click blank then click option'

Aprimary

B$primary

C$colors

Dcolor-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Including the '$' sign when accessing variables from namespace.

Using incorrect variable names.

Trying to access variables without the namespace prefix.

Variables from a namespace are accessed using 'namespace.$variableName'. However, in Sass code, when accessing variables, you do not include the '$' after the namespace. The correct usage is 'namespace.variableName'.

3fill in blank

hard

Fix the error in the import statement to correctly rename the namespace.

SASS

@use 'theme' [1] th;

Drag options to blanks, or click blank then click option'

Aas

Bwith

Crename

Dnamespace

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'with' or 'rename' instead of 'as'.

Omitting the 'as' keyword.

Using 'namespace' keyword which is invalid.

The correct keyword to rename a namespace in '@use' is 'as'.

4fill in blank

hard

Fill both blanks to import 'buttons' with a short namespace and use a variable from it.

SASS

@use 'buttons' [1];
.btn { background: [2].$bg-color; }

Drag options to blanks, or click blank then click option'

Aas btn

Bbtn

Cbuttons

Das buttons

Attempts:

3 left

💡 Hint

Common Mistakes

Not using 'as' keyword to rename.

Using the original namespace name instead of the new one.

Trying to access variables without namespace.

You rename the namespace using 'as btn' and then use 'btn' to access variables.

5fill in blank

hard

Fill all three blanks to import 'layout' as 'ly', use a mixin, and a variable from it.

SASS

@use 'layout' [1];
.container {
  [2].[3]();
  width: ly.$max-width;
}

Drag options to blanks, or click blank then click option'

Aas ly

Bly

Ccenter-content

Dlayout

Attempts:

3 left

💡 Hint

Common Mistakes

Not renaming the namespace correctly.

Calling mixins without the namespace prefix.

Using wrong mixin or variable names.

You rename the namespace with 'as ly', then use 'ly' to call the mixin 'center-content'.

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