YogeshChauhan . com

@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;
}

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Check if mixin is being called in a style rule or not in SCSSSCSSWhat are Identifiers in JavaScript?JavaScript2 Ways we can create an Array in JavaScriptJavaScriptLearn how to add Scroll Indicator using CSS and JavaScript?CSSadd_filter function in WordPressWordPressWordPress: How to find all posts from a custom post type with multiple custom fields values?WordPress