@forward and index files

When every component needs both the variables and the mixins, each file starts with several @use lines. The @forward rule collects members of several files into one module: a component loads that single module and gets everything.

Forwarding files

Suppose styles/abstracts/ has two files:

// styles/abstracts/_variables.scss
$primary: #2563eb;
$gap: 16px;

// styles/abstracts/_mixins.scss
@mixin card-shadow {
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}

Create styles/abstracts/_index.scss that forwards both:

// styles/abstracts/_index.scss
@forward "variables";
@forward "mixins";

@forward does not print anything and does not give the current file access to the members. It only says: whoever loads this module also gets the members of these files.

Loading a folder

A file named _index.scss is special: @use with the folder's name loads it. A component now needs one line, and the namespace is the folder name, abstracts:

// styles/components/_cards.scss
@use "../abstracts";
 
.card {
  padding: abstracts.$gap;
  border-top: 4px solid abstracts.$primary;
  @include abstracts.card-shadow;
}

// styles/main.scss
@use "components/cards";

.card {
  padding: 16px;
  border-top: 4px solid #2563eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

<style>
  .card {
    padding: 16px;
    border-top: 4px solid #2563eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
</style>
 
<div class="card">The card got the gap, the colour and the shadow</div>

@include inserts a mixin — the next chapter is about mixins. Note that the namespace goes before the mixin's name, not before @include.

What gets forwarded

By default @forward passes on all public members. Two keywords limit the list:

show and hide are useful for a library that has internal helpers it does not want to expose.

Forwarding and using in one file

If the index file itself needs a member, it writes both rules, and @forward comes first:

// styles/abstracts/_index.scss
@forward "variables";
@forward "mixins";
@use "variables";

Common mistake

Do not put CSS rules into abstracts/. Everything there — variables, mixins, functions — produces no CSS on its own, so any component can load the folder safely. If you add a .card rule to _mixins.scss, it ends up in the output wherever the folder is first loaded, and finding where it came from becomes hard. Keep rules in base/, layout/ and components/.