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.
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.
@import "variables"
body{
color:$primary-font-color;
}
@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
🧮 Tags
Recent posts
Ways to skip test case execution in Gradle project build Learn Gradle | tutorials, and examples How to run only single test cases with Gradle build How to print dependency tree graph in Gradle projects How to perform git tasks with build script?Related posts