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 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
PHP Variables ScopePHPHow to make HTML form interactive and using CSS?CSSWhat is Host Hardening and What are some Important Hardening Steps?MiscellaneousLearn to Implement Estimated Reading Time using PHP Part 2: Final Implementation with Source CodePHPHow to create a dynamic countdown using HTML and JavaScript?HTMLHow to define constants in PHP?PHPWhat is a component helper function in React?ReactJavaScript: how to detect a browser using the user agent?JavaScriptHow to render lists inside a component in React?ReactControl Scrolling with CSS Scroll SnapCSSHow to create a pricing table using flex in CSS?CSSHow to Install PHP Laravel on MacOS Catalina?PHP