Importing built-in modules with @use in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the @use rule do in Sass?

The @use rule loads a Sass module and makes its variables, mixins, and functions available in the current file with a namespace.

beginner

How do you import a built-in Sass module like <code>math</code>?

You write <code>@use "sass:math";</code> at the top of your Sass file to import the built-in <code>math</code> module.

intermediate

Why is it better to use @use instead of @import in Sass?

@use loads modules only once and avoids naming conflicts by using namespaces, making your stylesheets easier to maintain and faster to compile.

beginner

How do you call the pow function from the math module after importing it with @use "sass:math";?

You call it with the namespace like this: math.pow(2, 3) which calculates 2 to the power of 3.

intermediate

Can you rename a built-in module namespace when using @use? How?

Yes, you can rename it by adding as followed by the new name, for example: @use "sass:math" as m; then use m.pow(2, 3).

Which syntax correctly imports the built-in Sass color module?

A @use "sass:color";

B @import "color";

C @use "color";

D @import "sass:color";

The correct way to import built-in modules is with @use and the prefix "sass:", so @use "sass:color"; is correct.

After @use "sass:math";, how do you call the sqrt function?

A sqrt(9)

B math.sqrt(9)

C sass.math.sqrt(9)

D use.math.sqrt(9)

Functions from modules are called with the module namespace, so math.sqrt(9) is correct.

What is a benefit of using @use over @import in Sass?

A It loads modules multiple times

B It disables variables

C It avoids naming conflicts with namespaces

D It removes all styles

@use avoids naming conflicts by requiring namespaces, making code clearer and safer.

How do you rename the namespace of the math module to m?

A @use "sass:math" as m;

B @use "sass:math" rename m;

C @import "sass:math" as m;

D @use "math" as m;

You rename namespaces with the syntax: @use "sass:math" as m;

Which of these is NOT a built-in Sass module?

A sass:math

B sass:list

C sass:color

D sass:layout

"sass:layout" is not a built-in Sass module; math, color, and list are.

Explain how to import and use a built-in Sass module with @use.

Think about the syntax and how you access module features.

Why should you prefer @use over @import in modern Sass projects?

Consider how @use handles namespaces and module loading.

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