Yogesh Chauhan's Blog

@forward modules with a prefix in SCSS (Sass)

in SCSS on May 30, 2021

Quick recap:

What are members in SassScript?

To understand @forward rule, you need to understand the @use rule first.

Here’s another post about @forward rule basics:

@forward rule in SCSS (Sass)

Members are usually used with a namespace. That’s why you should use a short and easy to read name rather than a long and a complex one. But if you are importing those members in other modules/stylesheets, those names won’t make any sense. So, what we need to do is add a prefix to all those members.

The syntax is very simple:


@forward "url" as -;

That will add the specified prefix to the beginning of every member name @forwarded by the module.

Let’s understand this by an example.

Let’s say we have _list.scss file inside “src” folder.


// src/_list.scss
@mixin reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

We are forwarding that module in bootstrap.scss file with a prefix “list-*”


// bootstrap.scss
@forward "src/list" as list-*;

This is how we can use in main stylesheet.


// styles.scss
@use "bootstrap";

li {
  @include bootstrap.list-reset;
}


Most Read

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

#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 #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
How to add today’s date in HTML input date value using JavaScript?JavaScriptHow to get Current Year, Month and Date in JavaScript?JavaScriptHow to create a Child Theme in WordPress?WordPressValues and Types Basics in JavaScriptJavaScriptHow to create a CSS full page background image?CSSCustom Post Type Template Files in WordPressWordPressSQL ANY OperatorSQL/MySQLWhat is IPS(Intrusion Prevention System), How Does It Work and What are the Detection Types?MiscellaneousHow SCSS (Sass) finds a module without a file extension?SCSSHow to create a sticky menu pin using CSS?CSSNew to  Drupal? Here’s What You Need to KnowDrupal4 advanced ways to search ColleagueColleague