Configuring Modules with @forward rule in SCSS (Sass)

Configuring modules with @forward rule is similar to configuring modules with @use rule.

The difference is that you can use the !default flag in it’s configuration while configuring with @forward module.

That is very handy since you can use the other modules members with no values can have default values and if they have values then you can use that value.

For e.g. let’s say you have a _fonts.scss file with the following styles:

// _fonts.scss
$black: #000 !default;

.arial {
  color: $black;
}

Let’s forward that stylesheet into another one.

// _fonts_adjusted.scss
@forward 'fonts' with (
  $black: #222 !default,
);

Finally, let’s use it in the main stylesheet.

// main.scss
@use 'fonts_adjusted' with ($black: #333);

This is how it’ll compile into CSS at the end:

// main.scss
.arial {
  color: #333;
}

Share this post