{

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 @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 load once if you have multiple times use

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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.