Why Importing built-in modules with @use in SASS? - Purpose & Use Cases

The Big Idea

Discover how a simple import can save you hours of tedious style updates!

The Scenario

Imagine you are writing styles for a website and want to use colors and math functions. You try to copy and paste code from different places or write the same color values and calculations again and again.

The Problem

This manual way is slow and causes mistakes. If you want to change a color or fix a calculation, you must find and update every place manually. It's easy to forget some spots or make errors.

The Solution

The @use rule lets you import built-in Sass modules like color and math once. Then you can use their functions and variables easily. This keeps your code clean, organized, and easy to update.

Before vs After

✗ Before

$primary-color: #ff0000;
$secondary-color: #cc0000;

.button {
  color: $primary-color;
  padding: 10px + 5px;
}

✓ After

@use 'sass:color';
@use 'sass:math';

.button {
  color: color.scale(#ff0000, $lightness: -20%);
  padding: math.add(10px, 5px);
}

What It Enables

You can easily use powerful built-in tools for colors, math, and more, making your styles smarter and easier to maintain.

Real Life Example

When building a website theme, you can import the color module to adjust shades dynamically and the math module to calculate spacing, all without rewriting code.

Key Takeaways

Manual copying of colors and calculations is slow and error-prone.

@use imports built-in Sass modules cleanly and safely.

This makes your styles easier to write, read, and update.

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