Yogesh Chauhan's Blog

@forward rule in SCSS (Sass)

in SCSS on May 27, 2021

Quick recap:

What are members in SassScript?

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

You can use @forward rule to load a SCSS (Sass) stylesheet and make he members available when you load your stylesheet with the @use rule.

@forward rule helps you to organize Sass libraries in multiple files and you don’t need to import everything one by one. You can just load a single entrypoint file.

How different the @forward rule is from @use rule?

Writing @forward rule is same as writing @use rule or @import rule and it’s going to load the module just like @use rule does.

The difference is that @forward lets you use the public members of the imported module just like they were defined in the module itself! Though, the member are not actually available in the module. To make the members are available, you need to use the @use rule as well.

If you’re going to write @forward and @use rules in the stylesheet, for the same module, then use @forward rule first and then write @use rule.

That way you can modify the @forwarded module and that will get applied first. After that the @use rule will load the module without any configuration.


@forward rule example

Write down a @mixin in a separate file named as _list.scss inside src directory.


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

Use @forward rule for forward that stylesheet in a separate file called bootstrap.scss.


// bootstrap.scss
@forward "src/list";

Now, in the main stylesheet, import that bootstrap.scss via @use rule.

Now, we can use the @mixin declared in the _list.scss using the dot notation with bootstrap.

Just like this:


// styles.scss
@use "bootstrap";

li {
  @include bootstrap.list-reset;
}

This is how it compiled into CSS at the end:


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


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS? #Jan 8 How to Install Xcode Command Line Tools on MacOS?
You might also like these
How to scroll contents of a an element vertically using JavaScript?JavaScriptbin2hex() and chr() String Functions in PHPPHPWhat’s the difference between visibility: hidden and display: none?CSSHow to add onclick event to html elements dynamically using JavaScript?JavaScriptWhat is Git?MiscellaneousHow to define variables in SCSS (Sass)?SCSS