@use directive for imports in SASS

Introduction

The @use directive helps you bring styles from one Sass file into another safely and clearly.

When you want to share colors or fonts across multiple style files.

When you want to organize your styles into smaller, manageable pieces.

When you want to avoid repeating the same styles in different files.

When you want to keep your styles clean and avoid conflicts between variables or mixins.

When you want to use styles from a library or framework in your own Sass files.

Syntax

SASS

@use 'filename';

The filename is usually a relative path to another Sass file without the .scss extension.

By default, @use loads the file once and namespaces its contents to avoid conflicts.

Examples

This imports the colors.scss file and you can access its variables or mixins with the colors. prefix.

SASS

@use 'colors';

This imports buttons.scss but uses btn. as a short prefix for its contents.

SASS

@use 'buttons' as btn;

This imports typography.scss and overrides the $font-size variable with 16px.

SASS

@use 'typography' with ($font-size: 16px);

Sample Program

This example imports a colors.scss file that defines color variables. Then it uses those colors to style a button with background and text colors.

SASS

@use 'colors';

.button {
  background-color: colors.$primary-color;
  color: colors.$text-color;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

Important Notes

@use replaces the older @import and is better for avoiding style conflicts.

Always use the namespace (like colors.) to access variables or mixins from the imported file.

You can customize variables when importing using the with keyword.

Summary

@use imports Sass files with a clear namespace.

It helps keep styles organized and avoids conflicts.

You can rename the namespace or customize variables when importing.