YogeshChauhan . com

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

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 any column has NULL values in PostgresPostgresAvoid using new Array() in JavaScriptJavaScriptWhat is Git?MiscHow to create a simple text and image slider using CSS and JavaScript?CSSSimple Page Hit Counter in PHPPHPHow to make HTML form interactive and using CSS?CSSCSS align-items property examplesCSSHow to set default timezone using PHP?PHPHow to CREATE TABLE in SQL with and without using Another Table?SQL/MySQLHow to create bouncing balls using HTML canvas and JavaScript?HTMLHow to list all PHP variables to debug the script?PHPHow to float an image around texts?CSS