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.

Practice

1. What does the Sass @use rule do when importing built-in modules?

easy

A. It imports CSS files directly into Sass without any namespace.

B. It imports a built-in Sass module to use its features with a namespace.

C. It compiles Sass files into CSS automatically.

D. It removes unused CSS rules from the stylesheet.

Solution

1. Step 1: Understand the purpose of @use

   The @use rule imports Sass modules and gives access to their functions and variables under a namespace.

2. Step 2: Differentiate from other Sass features

   Unlike @import, @use does not import raw CSS but Sass modules with scoped namespaces.

3. Final Answer:

   It imports a built-in Sass module to use its features with a namespace. -> Option B

4. Quick Check:

   @use imports modules with namespace [OK]

Hint: Remember: @use always adds a namespace to imported modules [OK]

Common Mistakes:

• Confusing @use with @import for CSS files
• Thinking @use compiles Sass to CSS
• Assuming @use removes unused CSS

2. Which of the following is the correct syntax to import the built-in Sass math module using @use?

easy

A. @use "math";

B. @import "sass:math";

C. @use "sass:math";

D. @use math;

Solution

1. Step 1: Recall the correct syntax for built-in modules

   Built-in Sass modules are imported with @use "sass:module-name"; syntax.

2. Step 2: Check each option

   @use "sass:math"; uses the correct syntax with quotes and the prefix sass:. Others miss quotes, prefix, or use @import.

3. Final Answer:

   @use "sass:math"; -> Option C

4. Quick Check:

   Built-in modules need @use "sass:module"; [OK]

Hint: Built-in modules always use "sass:" prefix inside quotes [OK]

Common Mistakes:

• Omitting quotes around module name
• Using @import instead of @use
• Forgetting the "sass:" prefix

3. Given the Sass code:

@use "sass:color";

.my-text {
  color: color.scale(color.$blue, $lightness: 20%);
}

What color effect does this code apply to .my-text?

medium

A. It causes a syntax error.

B. It makes the blue color 20% darker.

C. It changes the blue color to red.

D. It makes the blue color 20% lighter.

Solution

1. Step 1: Understand color.scale function

   The color.scale function adjusts color properties like lightness by the given percentage.

2. Step 2: Analyze the argument $lightness: 20%

   This increases the lightness of the blue color by 20%, making it lighter.

3. Final Answer:

   It makes the blue color 20% lighter. -> Option D

4. Quick Check:

   color.scale with positive lightness increases brightness [OK]

Hint: Positive $lightness in color.scale makes color lighter [OK]

Common Mistakes:

• Confusing lightness increase with darkening
• Assuming color changes hue instead
• Thinking the code has syntax errors

4. What is wrong with this Sass code snippet?

@use "sass:math";

.box {
  width: math.percentage(0.5);
}

medium

A. The math.percentage() function does not exist; it should be math.percent().

B. The @use statement is missing a semicolon.

C. The function name should be math.percent() instead of math.percentage().

D. There is no error; the code is correct.

Solution

1. Step 1: Check the function name in the math module

   The correct function to convert a decimal to a percentage is math.percent(), not math.percentage().

2. Step 2: Verify the rest of the code

   The @use statement is correct and has a semicolon; only the function name is wrong.

3. Final Answer:

   The math.percentage() function does not exist; it should be math.percent(). -> Option A

4. Quick Check:

   Use math.percent() for percentage conversion [OK]

Hint: Remember: math.percent(), not math.percentage() [OK]

Common Mistakes:

• Using incorrect function name math.percentage()
• Thinking @use needs no semicolon
• Assuming code is error-free

5. You want to use the Sass math module to calculate the width as 75% of 1200px. Which code correctly imports the module and calculates the width?

hard

A. @use "sass:math";
.container {
width: math.div(75, 100) * 1200px;
}

B. @use "sass:math";
.container {
width: math.percent(0.75);
}

C. @use "sass:math";
.container {
width: math.div(75%, 100) * 1200px;
}

D. @use "sass:math";
.container {
width: math.percent(75) * 1200px;
}

Solution

1. Step 1: Import the math module correctly

   The code uses @use "sass:math"; which is correct for built-in modules.

2. Step 2: Calculate 75% of 1200px correctly

   Using math.div(75, 100) divides 75 by 100 to get 0.75, then multiplies by 1200px for the width.

3. Step 3: Check other options for errors

   @use "sass:math"; .container { width: math.percent(0.75); } sets width to 75% of the parent, not a fixed 900px. @use "sass:math"; .container { width: math.div(75%, 100) * 1200px; } uses math.div(75%, 100) which equals 0.75% (dividing percentage by unitless keeps %), so 0.75% * 1200px = 9px. @use "sass:math"; .container { width: math.percent(75) * 1200px; } uses math.percent(75) which returns 7500%.

4. Final Answer:

   @use "sass:math"; .container { width: math.div(75, 100) * 1200px; } -> Option A

5. Quick Check:

   Use math.div for division, multiply for percentage calculation [OK]

Hint: Use math.div(percentage, 100) to get decimal for calculations [OK]

Common Mistakes:

• Using math.percent() for relative percentage instead of fixed pixel calculation
• Dividing percentages by unitless numbers (keeping % unit)
• Misunderstanding multiplication with units