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.