Quick recap:
To understand @forward rule, you need to understand the @use rule first.
You can use @forward rule to load a SCSS (Sass) stylesheet and make he members available when you load your stylesheet with the @use rule.
@forward rule helps you to organize Sass libraries in multiple files and you don’t need to import everything one by one. You can just load a single entrypoint file.
How different the @forward rule is from @use rule?
Writing @forward rule is same as writing @use rule or @import rule and it’s going to load the module just like @use rule does.
The difference is that @forward lets you use the public members of the imported module just like they were defined in the module itself! Though, the member are not actually available in the module. To make the members are available, you need to use the @use rule as well.
If you’re going to write @forward and @use rules in the stylesheet, for the same module, then use @forward rule first and then write @use rule.
That way you can modify the @forwarded module and that will get applied first. After that the @use rule will load the module without any configuration.
@forward rule example
Write down a @mixin in a separate file named as _list.scss inside src directory.
// src/_list.scss
@mixin list-reset {
margin: 0;
padding: 0;
list-style: none;
}
Use @forward rule for forward that stylesheet in a separate file called bootstrap.scss.
// bootstrap.scss
@forward "src/list";
Now, in the main stylesheet, import that bootstrap.scss via @use rule.
Now, we can use the @mixin declared in the _list.scss using the dot notation with bootstrap.
Just like this:
// styles.scss
@use "bootstrap";
li {
@include bootstrap.list-reset;
}
This is how it compiled into CSS at the end:
li {
margin: 0;
padding: 0;
list-style: none;
}
examples forward functions mixin rules sass stylesheet use rule
