Importing built-in modules with @use in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Sass math module using @use.

SASS

@use '[1]';

.selector {
  width: math.div(100%, 2);
}

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

Asass:list

Bsass:math

Csass:color

Dsass:string

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@use "math";' without the 'sass:' prefix.

Importing the wrong module like 'sass:color'.

The @use rule imports built-in Sass modules. To use math functions, you import sass:math.

2fill in blank

medium

Complete the code to import the Sass color module and use the lighten function.

SASS

@use '[1]';

.button {
  background-color: color.lighten(#336699, 20%);
}

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

Asass:math

Bsass:list

Csass:string

Dsass:color

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'sass:math' instead of 'sass:color'.

Forgetting the 'sass:' prefix.

The lighten function is part of the sass:color module, so you import it with @use "sass:color";.

3fill in blank

hard

Fix the error by completing the import statement for the Sass list module.

SASS

@use '[1]';

$list: list.append((1, 2, 3), 4);

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

Asass:list

Bsass:color

Csass:math

Dsass:string

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong module like 'sass:math'.

Omitting the 'sass:' prefix.

The list.append function is in the sass:list module, so you must import it with @use "sass:list";.

4fill in blank

hard

Fill both blanks to import the string module and use the str-length function.

SASS

@use '[1]';

$text-length: string.[2]("Hello World");

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

Asass:string

Bsass:color

Cstr-length

Dsass:list

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'length' instead of 'str-length'.

Importing the wrong module like 'sass:list'.

The str-length function is in the sass:string module. Import it with @use "sass:string"; and call string.str-length().

5fill in blank

hard

Fill all three blanks to import the math module, use the pow function, and assign the result to a variable.

SASS

@use '[1]';

$result: math.[2](2, [3]);

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

Asass:color

Bpow

C3

Dsass:math

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'math.power' instead of 'math.pow'.

Importing 'sass:color' instead of 'sass:math'.

To calculate powers, import sass:math and use the pow function. Here, math.pow(2, 3) calculates 2 to the power of 3.