The @use rule is basically like @import, it loads variables, mixins, functions from other SassScript stylesheets.
Stylesheets loaded via @use rule are called “modules”.
This is how you can write the @use rule:
@use "./variables.scss";
Stylesheets loaded with @use rule are only included once in the CSS after compilation, even if you include it multiple times.
That’s why it’s better to import files by @use rule rather than @import rule.
You must always add the @use rules before any other rules except @forward rules.
@use rule Example
Let’s say you have a separate stylesheet for links style, “basic/_links.scss“
a{
padding: .2em;
line-height: 1;
}
and another stylesheet for link hover state, “basic/_hover.scss“
a:hover{
color: yellow;
}
This is how you include those those stylesheets:
@use 'basic/links';
@use 'basic/hover';
examples import mixin sass use rule
