Sass: @forward Directive

@forward Directive

The @forward rule loads a Sass stylesheet and makes its mixins, functions, and variables available when your stylesheet is loaded with the @use.

It makes it possible to organize Sass libraries across many files, while allowing their users to load a single entrypoint file.

The rule is written @forward "<url>". It loads the module at the given URL just like @use, but it makes the public members of the loaded module available to users of your module as though they were defined directly in your module. Those members aren’t available in your module, though—if you want that, you’ll need to write a @use rule as well.

If you do write both a @forward and a @use for the same module in the same file, it’s always a good idea to write the @forward first.

Example:

// 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;
}

And the style.css generated is as follows:

li {
  margin: 0;
  padding: 0;
  list-style: none;
}

Controlling Visibility

You can keep some members private so that only your package can use them, or you may want to require your users to load some members a different way.

You can control exactly which members get forwarded by writing @forward "<url>" hide <members...> or @forward "<url>" show <members...>.

The hide form means that the listed members shouldn’t be forwarded, but everything else should. The show form means that only the named members should be forwarded. In both forms, you list the names of mixins, functions, or variables (including the $).

Example:

// src/_list.scss
$horizontal-list-gap: 2em;

@mixin list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin list-horizontal {
  @include reset;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: $horizontal-list-gap;
    }
  }
}

// bootstrap.scss
@forward "src/list" hide list-reset, $horizontal-list-gap;