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 add Read More Read Less Button using JavaScript? #2 How to check if radio button is checked or not using JavaScript? #3 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #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
You might also like these
How services and dependency injection work in Angular?AngularHow JavaScript classes allows us to do less typing (syntactic sugar)?JavaScriptHow to Hide HTML elements automatically after few seconds using JavaScript?HTMLHow to add a ribbon on top of a container using CSS?CSSWhat is the best way to add JavaScript Code into HTML?HTMLHow to remove trailing characters from a string using JavaScript?JavaScriptWhat are Conditional Tags in WordPress?WordPressSteps to Secure a VPNMiscellaneousHow to get ACF values from custom post type?WordPressHow to disable scrolling on html body on menu click using JavaScript?JavaScriptTwo ways we can use colon(:) in Envision BasicEnvision BasicHow to deploy Angular App on Dreamhost or Amazon S3 or firebase?Angular