SASS @forward At-rule

SASS @forward at-rule is used to expose the members of modules(stylesheets) included in a stylesheet using the @use at-rule when the stylesheet is included in another stylesheet.

Let's take an example to understand this. If we have a stylesheet _padding.sass which contains all the style rules(mixins, variables etc) for padding, and we include this in our stylesheet style.sass using the @use at-rule. Now if we have to create another stylesheet, let's say newstyle.sass and we include the style.sass in this stylesheet using the @use at-rule, then we won't be able to access the members of _padding.sass stylesheet in the newstyle.sass stylesheet.

Hence, if we want the members of the stylesheet _padding.sass to be accessible in the newstyle.sass file we should use the SASS @forward at-rule to import the _padding.sass stylesheet in style.sass file.

The @forward at-rule will make the members of _padding.sass file available in the style.sass file as if they were defined in the style.sass file, hence if any other stylesheet will then include style.sass file using the @use at-rule, will be able to access the members of _padding.sass file too.

SASS @forward: Syntax

The syntax of the @forward at-rule is same as that of @use at-rule.

@forward 'URL-OF-STYLESHEET'

If we use the @forward at-rule, we can skip using the @use at-rule. We can also have both @use and @forward at-rule for including a single stylesheet as the SASS engine will only include it once.

SASS @forward: Working

SASS @forward at-rule also works just like the @use at-rule, inluding the members of a stylesheet into another stylesheet. But the @use at-rule hides the members of the included stylesheet from further imports, but @forward at-rule makes the included stylesheet available for further imports too, there by enabling you to form a heirarchy for stylesheet imports.

If you write both @forward and @use at-rule, you should write the @forward at-rule first followed by the @use at-rule.

Let's take an example and see how this is used in SASS:

/* style/_list.sass */

@mixin list-style
  margin: 0
  padding: 0
  list-style: none

/* main.sass */

@forward "src/list"

/* styles.sass */
@use "main"

li
  @include main.list-style

This will be compiled into the following CSS:

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

To check the difference between @forward and @use at-rule, try changing the @forward "src/list" statement in the main.sass file to @use "src/list" and then compile the CSS, you will see that the styling rules will not be imported.

SASS @forward: Namespace and adding a Prefix

As we know that when a stylesheet is included into another stylesheet, SASS creates a namespace which is the filename of the stylesheet, we have already covered this in details in the SASS @use at-rule. Now, there are few questions that comes to my mind:

1. What will be the namespace for the module(stylesheet) included using the @forward at-rule?

2. Will it be the same as the namespace for the stylesheet in which it is included?

3. Do we have any control over this?

Well, as we can see in the example above, yes the file included using the @forward module will be accessed using the same namespace as the stylesheet in which it is included because the @forward at-rule makes the members of the module being imported as the members of the stylesheet importing it.

In the code example above, we imported _list.sass file in main.sass which is then imported into styles.sass, in which we accessed the member of the _list.sass file using the main namespace because the _list.sass file was imported in the main.sass file using the @forward at-rule.

But, we can add a prefix to all the member names of the module getting imported using the @forward at-rule. Following is the syntax for adding a prefix:

@forward "<url>" as <prefix>-*

Let's modify the example above to use a prefix while importing the _list.sass file.

/* style/_list.sass */

@mixin stylish
  margin: 0
  padding: 0
  list-style: none

/* main.sass */

@forward "src/list" as list-*

This will add the prefix list- to the names of all the members of the stylesheet _list.sass (all mixins, variables, functions etc).

/* styles.sass */
@use "main"

/* name of mixin is stylish but now we will call it as list-stylish */
li
  @include main.list-stylish

This will be compiled into the following CSS:

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

SASS @forward: Controlling Visibility

While importing a module(stylesheet) into another stylesheet, we can control what all members should be further available in consecutive imports using the hide and show keywords followed by member names in the @forward at-rule statement.

Following is the syntax for it:

@forward "<url>" hide <members...> 
/*  or  */ 
@forward "<url>" show <members...>

Below we have a stylesheet _button.sass,

/* css/_button.sass */ 

$btn-font: sans-serif

@mixin btn
    padding: 10px
    border-radius: 5px
    text-decoration: none

@mixin btn-success
    @include btn
    background-color: green

To hide some mixin and variable from the above stylesheet,

/* main.sass */

@forward "css/button" hide btn, $btn-font

So, that's it for SASS @forward at-rule.