How to use sass variable in multiple files in Sass| 2 ways examples

SASS provides variables declared once and used in multiple files using @import and @use directives.

For example _variables.scss

$primary-font-color: blue;

Let’s use this variable in multiple files in different ways.

• use the @import directive home.scss

@import "variables" body {
  color: $primary-font-color;
}

• use @use directive home.scss

@use "variables" body {
  color: variables.$primary-font-color;
}

or you can also use a namespace with @use as seen below

home.scss

@use "variables" as v body {
  color: v.$primary-font-color;
}

@import allows you to provide global scoping and no local scope, It is going to be deprecated soon, Please avoid using @import.

@use provides naming conflict and loads once if you have multiple times use

You can check more about the difference between @import and @use