Importing built-in modules with @use in SASS

Introduction

Using @use lets you bring in built-in Sass modules to use their features. It helps keep your styles organized and easy to manage.

When you want to use Sass's built-in color functions to change colors.

When you need to use math functions like rounding or calculating values.

When you want to use Sass's list or map functions to handle collections.

When you want to keep your styles clean by using variables and mixins from built-in modules.

When you want to avoid naming conflicts by using namespaces with built-in modules.

Syntax

SASS

@use "sass:module-name";

Replace module-name with the built-in module you want, like color or math.

The @use rule loads the module once and gives it a namespace to avoid conflicts.

Examples

This imports the color module so you can use its color functions.

SASS

@use "sass:color";

This imports the math module to use math functions like math.round().

SASS

@use "sass:math";

This imports the list module to work with lists in Sass.

SASS

@use "sass:list";

Sample Program

This Sass code imports the built-in color and math modules. It lightens a base blue color by 20% for the button background. It also rounds the padding value for neat spacing.

SASS

@use "sass:color";
@use "sass:math";

$base-color: #3498db;

.button {
  background-color: color.scale($base-color, $lightness: 20%);
  padding: math.round(1.5)rem 2rem;
  color: white;
  border-radius: 0.5rem;
}

Important Notes

Always use the @use rule at the top of your Sass file before other styles.

Built-in modules come with Sass, so you don't need to install anything extra.

Using namespaces like color. or math. helps avoid confusion with your own variables or functions.

Summary

@use imports built-in Sass modules to access their features.

It helps keep your styles organized and avoids naming conflicts.

Use the syntax @use "sass:module-name"; to import modules like color or math.

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