@forward modules with a prefix in SCSS (Sass)

Quick recap:

What are members in SassScript?

To understand @forward rule, you need to understand the @use rule first.

Here’s another post about @forward rule basics:

@forward rule in SCSS (Sass)

Members are usually used with a namespace. That’s why you should use a short and easy to read name rather than a long and a complex one. But if you are importing those members in other modules/stylesheets, those names won’t make any sense. So, what we need to do is add a prefix to all those members.

The syntax is very simple:

@forward "url" as -;

That will add the specified prefix to the beginning of every member name @forwarded by the module.

Let’s understand this by an example.

Let’s say we have _list.scss file inside “src” folder.

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

We are forwarding that module in bootstrap.scss file with a prefix “list-*”

// bootstrap.scss
@forward "src/list" as list-*;

This is how we can use in main stylesheet.

// styles.scss
@use "bootstrap";

li {
  @include bootstrap.list-reset;
}

Share this post