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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #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

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
NATURAL JOIN in PostgresPostgresArbitrary Arguments in SCSS functionsSCSSHow to vertically align a html radio button to it’s label?CSSUnderstanding the confusing and handy “This” keyword in JavaScriptJavaScriptDebugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPressHow to create a horizontal scrolling menu with and without flex using CSS (or SCSS)?CSS