@import to @use migration in SASS

Introduction

We switch from @import to @use in Sass to organize styles better and avoid repeating code. @use helps keep things clear and safe.

When you want to include styles from another file without repeating variables or mixins.

When you want to avoid conflicts from loading the same file multiple times.

When you want to keep your styles modular and easier to maintain.

When you want to use namespaces to clearly see where styles come from.

When you want faster and safer Sass builds.

Syntax

SASS

@use 'filename' [as namespace];

@use loads a Sass file once and gives you access to its variables, mixins, and functions.

You can add a namespace to keep things organized, like @use 'colors' as c;.

Examples

Loads the colors.scss file with default namespace colors.

SASS

@use 'colors';

Loads colors.scss but uses c as a short namespace.

SASS

@use 'colors' as c;

Loads mixins.scss and makes its contents available without a namespace.

SASS

@use 'mixins' as *;

Sample Program

This example shows how to use variables and mixins from a colors.scss file using @use with a namespace c. It styles a button with colors and rounded corners.

SASS

@use 'colors' as c;

.button {
  background-color: c.$primary-color;
  color: c.$text-color;
  @include c.rounded-corners;
}

Important Notes

@import loads files multiple times and can cause conflicts; @use loads once.

Always use namespaces with @use to avoid name clashes, unless you use as *.

Update your old @import files gradually to @use for better Sass code.

Summary

@use replaces @import for safer and clearer Sass code.

It loads files once and uses namespaces to organize styles.

Use @use 'filename' as ns; to access variables and mixins with ns. prefix.