Yogesh Chauhan's Blog

Configuring Modules with @forward rule in SCSS (Sass)

in SCSS on June 3, 2021

Configuring modules with @forward rule is similar to configuring modules with @use rule.

The difference is that you can use the !default flag in it’s configuration while configuring with @forward module.

That is very handy since you can use the other modules members with no values can have default values and if they have values then you can use that value.

For e.g. let’s say you have a _fonts.scss file with the following styles:


// _fonts.scss
$black: #000 !default;

.arial {
  color: $black;
}

Let’s forward that stylesheet into another one.


// _fonts_adjusted.scss
@forward 'fonts' with (
  $black: #222 !default,
);

Finally, let’s use it in the main stylesheet.


// main.scss
@use 'fonts_adjusted' with ($black: #333);

This is how it’ll compile into CSS at the end:


// main.scss
.arial {
  color: #333;
}


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
How states work in React?ReactWindow setInterval() Method in JavaScriptJavaScriptINTERSECT and EXCEPT in PostgresPostgresHow to embed YouTube or other video links in WordPress?WordPressHow to apply style to the first-child using jQuery?jQueryWordPress 5.7 is migrating to latest jQuery version and people are freaking outjQueryAll different methods for accessing elements in the DOM using JavaScriptJavaScriptHow to create a flip effect with CSS?CSSHow to verify your domain in Google Console with a TXT record?MiscellaneousWhat are Web services?MiscellaneousHow to change style of nth-child using jQuery?jQueryCasting in PostgreSQLPostgres