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