@use directive for imports in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the styles from "colors.scss" using the @use directive.

SASS

@use '[1]';

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

Atheme

Bstyles

Cmain

Dcolors

Attempts:

3 left

💡 Hint

Common Mistakes

Including the file extension like 'colors.scss' inside @use.

Using @import instead of @use.

The @use directive imports the file named "colors.scss" by referencing it as "colors" without the file extension.

2fill in blank

medium

Complete the code to import "buttons.scss" and use the namespace "btn".

SASS

@use '[1]' as btn;

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

Alayout

Bbuttons

Ccolors

Dtypography

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong file name.

Forgetting to add the namespace after 'as'.

The @use directive imports the "buttons.scss" file and assigns it the namespace "btn" for easier reference.

3fill in blank

hard

Fix the error in the import statement to correctly import "variables.scss" with the namespace "vars".

SASS

@use '[1]' as vars;

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

Avariables

Bvariables.scss

Cvar

Dvars.scss

Attempts:

3 left

💡 Hint

Common Mistakes

Including the .scss extension in the @use path.

Using a wrong or incomplete file name.

When using @use, do not include the file extension. Use just the file name "variables".

4fill in blank

hard

Fill both blanks to import "theme.scss" with the namespace "th" and use a variable from it.

SASS

@use '[1]' as [2];
body {
  background-color: [2].$background;
}

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

Atheme

Bth

Ctm

Dmain

Attempts:

3 left

💡 Hint

Common Mistakes

Using the file extension in the import path.

Using a different namespace than declared.

The file "theme.scss" is imported as namespace "th". Then the variable $background is accessed with th.$background.

5fill in blank

hard

Fill all three blanks to import "mixins.scss" as "mx", use a mixin named "button-style", and apply it to a class.

SASS

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

.btn {
  @include [2].[3];
}

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

Amixins

Bmx

Cbutton-style

Dbtn-style

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong file name or namespace.

Forgetting to use the namespace before the mixin name.

The file "mixins.scss" is imported as "mx". The mixin "button-style" is included using @include mx.button-style.