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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #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
You might also like these
How to add a Line Chart in Angular App?AngularFile System Integrity: How to Keep an Eye on Your Files and Folder Change?Miscellaneous:in-range and :out-of-range selector in CSSCSSHow to import MySQL small sample database into phpMySQL?SQL/MySQLWhat are Google Web Stories and How to create them in WordPress?WordPressCustom Post Type Template Files in WordPressWordPress