What are the differences between @use and @forward in SASS?

Question

@use and @forward both rules can load mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together. But i was wondering what are the differences between them and when to use which one?

Answer 1

Both @use and @forward are the alternatives provided by Dart sass for importing other stylesheets. When @import exposes the members such as variables, mixins, and functions globally accessible, @use loads them with the namespace. Hence, sass encourages using @use over @import.

Coming to the other, the @forward is paired with @use. For example, when a group of stylesheets have to be reused across multiple stylesheets, we can merge all of them into a single entry point using @forward and make use of @use to consume in the other stylesheets.

   // src/_list.scss
   @mixin list-reset {
     margin: 0;
     padding: 0;
     list-style: none;
    }

   // bootstrap.scss
   @forward "src/list";

   // styles.scss
   @use "bootstrap";
   li {
    @include bootstrap.list-reset;
   }

In the above example, if you try to use @use in place of @forward, the members in the _list.scss may be available for bootstrap.scss but styles.scss cannot access it.