SCSS / SASS - import variable

In this article, we would like to show you how to import variables in SCSS / SASS using modules.

Quick solution:

@use 'path/to/scss/file-name';

.element {
    color: file-name.$variable-name;
}

or:

@use 'path/to/scss/file-name' as alias-name;

.element {
    color: alias-name.$variable-name;
}

Practical example

In this example, we present how to use @use rule to import $font-size variable from assets/fonts.scss file into style.scss and use it for body element.

Project structure

/src/
 |
 +-- assets/
 |    |
 |    +-- fonts.scss
 |
 +------- style.scss

SCSS files

Example assets/fonts.scss file:

$font-size: 1.5rem;

Example style.scss file:

@use 'assets/fonts';

body {
	font-size: fonts.$font-size;
}

Note:

When we use variable imported from another file we need to precede its name with the namespace (file name). That's why we write fonts.$font-size instead of $font-size (fonts is the namespace). 

See also

1. SCSS / SASS - installation

2. SCSS - variable declaration

References

1. Sass: @use

2. Sass: Sass Basics