@import to @use migration in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to replace @import with the new @use syntax for loading a Sass file.

SASS

@[1] 'colors';

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

Ause

Bimport

Cforward

Dinclude

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@import' instead of '@use'.

Trying to use '@include' which is for mixins.

The new way to load Sass files is with @use, which replaces @import.

2fill in blank

medium

Complete the code to assign a namespace when using @use.

SASS

@use 'buttons' as [1];

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

Abtn

Bbuttons

Cnamespace

Duse

Attempts:

3 left

💡 Hint

Common Mistakes

Using the full filename as the namespace.

Using reserved keywords like 'use' as namespace.

You can assign a short namespace like 'btn' to refer to the styles inside the 'buttons' file.

3fill in blank

hard

Fix the error in the code by replacing the deprecated @import with the correct @use syntax.

SASS

@[1] 'variables';

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

Aforward

Bimport

Cuse

Dinclude

Attempts:

3 left

💡 Hint

Common Mistakes

Keeping '@import' which causes duplication issues.

Using '@include' which is for mixins.

The @import rule is deprecated. Use @use to load Sass files safely with namespaces.

4fill in blank

hard

Fill both blanks to correctly load and use a Sass file with a namespace.

SASS

@use 'layout' as [1];

.container {
  width: [2].max-width;
}

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

Alyt

Blayout

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the namespace and variable access.

Using the full filename instead of a short namespace.

Assigning the namespace 'lyt' allows you to access variables or mixins inside 'layout' using 'lyt.'.

5fill in blank

hard

Fill all three blanks to migrate from @import to @use with a namespace and access a variable.

SASS

@[1] 'theme' as [2];

body {
  background-color: [3].background;
}

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

Ause

Btheme

Cth

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@import' instead of '@use'.

Using different names for namespace and variable access.

Trying to access variables without a namespace.

Use '@use' to load 'theme' as namespace 'th', then access the 'background' variable with 'th.background'.