Namespace control with @use as in SASS

Introduction

We use @use as to give a shorter or custom name to a Sass file when importing it. This helps keep code clear and avoids long names.

When you want to import a Sass file but prefer a shorter name to write less code.

When you have multiple Sass files with similar names and want to avoid confusion.

When you want to organize your styles with clear, easy-to-read names.

When you want to avoid naming conflicts between different Sass files.

When you want to make your code easier to maintain by using meaningful short names.

Syntax

SASS

@use 'filename' as namespace;

The filename is the path to the Sass file you want to use.

The namespace is the new name you give to that file's styles.

Examples

This imports the colors file and lets you use c.$color-name to access variables.

SASS

@use 'colors' as c;

This imports the buttons file and you can write btn.$button-style to use its styles.

SASS

@use 'buttons' as btn;

This imports the layout file without a namespace, so you can use its variables and mixins directly.

SASS

@use 'layout' as *;

Sample Program

This example imports a colors Sass file with the namespace c. Then it uses variables from colors to style a button.

SASS

@use 'colors' as c;

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

Important Notes

Using @use as * removes the namespace but can cause name conflicts, so use carefully.

Namespaces help keep your code organized and avoid mistakes when many files have similar names.

Always use meaningful short names to make your code easier to read.

Summary

@use as lets you rename a Sass file when importing it.

This helps keep your code short and clear.

Namespaces prevent naming conflicts and improve organization.