SASS @forward Rule - Working and Usage of this Directive

1. What is SASS @forward Rule?

In SASS programming, the @forward rule or directive is one of the many other style rules. The SCSS @forward directive has somewhat similar working to the SASS @use directive. The main purpose of the @forward rule is to load the SASS modules in the current stylesheet. However, there are some technicalities in working on this directive.

In this tutorial, we will discuss working and the syntax of the SCSS @forward rule. Further, we will learn the usage of this SCSS @forward rule with practical examples. Also, we will learn how to add prefixes and control the visibility of modules in our stylesheet. Lastly, we will sum up this chapter by knowing the method to configure SASS modules. Interestingly, this tutorial will comprise some interesting and useful examples to comprehend each and every aspect of this directive.

1.1. Syntax of SCSS @forward Rule

The SCSS @forward rule loads another stylesheet or file using its source url or path. It has a really simple syntax to incorporate into our SASS projects.

@forward "url-of-file";

2. How @forward Directive Works in SCSS?

The working phenomena of this directive are interesting and involve some twists to discern. The below list contains some basic working rules of the SASS @forward directive.

• The primary function of this directive is to load other stylesheets.
• It has similar working in SASS just like the @import rule and the @use directive.
• Further, the loaded modules of the external stylesheet are made available for the users of your stylesheet.
• However, only those modules will be accessible which are public in the loaded file.
• Those modules or functions will load from your stylesheet just as they are defined in your file.
• Nonetheless, those public modules will not be obtainable in your file.
• Therefore, in order to make them useable in your file, you need to write the SASS @use rule also.
• There is no need to worry, the modules will be loaded an only a single time.
• Also, write the @use directive after loading the modules with the @forward rule.
• Hence, we will access all the modules, functions, and mixins in our SASS project.

2.1. Working Principle with Illustration

The above description listed the detailed working of the SCSS @forward rule. Let us look at the flow chart to have an insider look and get more cognition about this directive. The above image depicts that the SASS @forward rule or directive works as a bridge only. It means that it passes on the style rules from one file to the other. Therefore, in order to hold the style declarations, we include the @use directive in our SASS file, as explored earlier.

3. Usage of SASS @forward Directive

The above pictorial representation and theoretical explanation illustrated the working of the SASS @forward directive. Let us apprehend this rule further with some profound examples to discern deeply.

@mixin header-mixin{
	padding: 20px auto;
	text-align: center;
	font-size: 34px;
	background: #153966;
}

@forward "src/header";

@use "main"; // loading file
.header{
	@include main.header-mixin;
}

.header{
	padding: 20px auto;
	text-align: center;
	font-size: 34px;
	background: #153966;
}

3.1. Explanation

Below is the step-wise explanation of the above example.

• The above example shows three files of SCSS code in the SCSS tab.
• The first file has defined a @mixin directive named src/header.scss.
• Further, the second file loads the header.scss file using @forward directive which has name main.scss.
• Lastly, the style.scss stylesheet loads the main.scss by using the @use directive and implementing the @mixin rule, created in the first file.
• In the right-side CSS code tab, you can see the outcome of this compilation.

4. Ading Prefix to SASS Module

In the preceding example, we acquired the module i.e. mixin header-mixin but with a namespace. However, the module name might not make sense and is recognized easily where they are utilized. For this purpose, the SASS @forward rule provides the functionality of adding a prefix to the module name. Hence, all the loaded members or modules of that stylesheet will have an extra prefix attached which will serve as a reference also.

4.1. Syntax To Add Prefix to SCSS Module

There is a slight variation in the syntax of the @forward directive to append the prefix. See the below example.

@forward "url-of-file" as prefix-*;

Just add the keyword as followed by a prefix, dash(-), and asterisk(*) character will add a prefix to all the modules of the file loaded. The prefix can be any string you want, like list, heading, etc.

The next example explains the concept of adding prefixes. Navigate the tabs to look over the resulted CSS output.

@mixin welcome{
	padding: 10px;
	font-size: 20px;
	background: #f8f9fa;
	border-radius: 10px;
}
@mixin checkout{
	padding: 20px;
	font-size: 16px;
	background: #153966;
	border-radius: 10px;
}

@forward "src/core" as core-*;

@use "main"; // loading file
.welcome-wrapper{
	@include main.core-welcome;
}
.checkout-wrapper{
	@include main.core-checkout;
}

.welcome-wrapper{
	padding: 10px;
	font-size: 20px;
	background: #f8f9fa;
	border-radius: 10px;
}
.checkout-wrapper{
	padding: 20px;
	font-size: 16px;
	background: #153966;
	border-radius: 10px;
}

5. Control Visibility of SASS Modules

Whenever you forward modules of a file, it delivers all the accessible modules. However, sometimes you want to forward only certain or specific modules keeping the remaining members of that file secret. In this case, SASS @forward rule plays its role and allows us to hide some of the modules from the package. For this purpose, SASS facilitates us with two variants of syntax.

5.1. Syntax to Control Visibility of SCSS Modules

There are two approaches to controlling the visibility of SCSS modules using the @forward directive. We can either show the module or hide them. Look into the following syntax.

1. show: It only shows specific modules hiding the remaining.
2. hide: This keyword hides certain modules and makes all others available.

@forward "url-of-file" show module-1, module-4,...;

@forward "url-of-file" hide module-3, $color, $heading,...;

The above two types of syntax are helpful in controlling the visibility of modules and functions using the SCSS @forward rule. Let us now understand this with an example.

$light-bg: #f8f9fa;
$dark-bg: #153966;

@mixin signup{
	background: $light-bg;
	padding: 20px;
	font-size: 16px;
	margin:{
		top: 20px;
		bottom: 0;
	}
}
@mixin signin{
	@include signup;
	background: $dark-bg;
}

@forward "src/base" hide signin;

@forward "src/base" hide $light-bg;

5.2. Explanation

In the above example, we employed the @forward directive to insert the modules of the same file in two different files. In file signup.scss we utilized hide to make signin mixin invisible for this file. Whereas, in signin.scss file, we made the SCSS variable $light-bg hidden from this file.

6. Configuring SASS Modules

The @forward directive additionally allows us to obtain any SCSS module with configuration. This is somewhat similar to the configuration of modules in the @use directive however, @forward rules can have a !default flag in their configuration. Thus, we can modify the values of module defaults while loading them. Moreover, the default values are still available also.

6.1. Syntax For Configuring SASS Modules

The module configuration with SCSS @forward directive is quite easy-peasy. It holds the below syntax.

@forward "url-of-file" with (module-1: new-configuration, ...);

Check out the subsequent instance to understand how can we configure a module in SASS programming.

$font: 'Roboto', sans-serif !default;
$color: #2a73cc;

@mixin one{
	background: $color;
	font-size: 14px;
	font-family: $font;
}

@forward "src/base" with ( $color: #153966, );

@forward "src/base" with ( $color: #fff !default, $font: 'Noto', sans-serif );

6.2. Explanation

In the above example, we deployed the @forward rule to configure the values of the $color and $font for two separate files. In style.scss, we configured two modules with comma separation.

7. Conclusion

Finally, after going through this chapter, we grasped the skill of using the SASS @forward rule to load the modules of another file. Further, we have learned the working and how to use this directive in our SCSS code. Moreover, we have gone through prefixing SCSS modules, controlling their visibility, and eventually the module configuration.