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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #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
Colleague UI Basics: The Search AreaColleagueHow to merge arrays in JavaScript?JavaScriptWhat is an API?MiscellaneousHow to detect if browser supports WebP format on server side PHP script?PHPControl Scrolling with CSS Scroll SnapCSSHow to use GROUPING SETS to boost GROUP BY queries in Postgres?PostgresWhat is Object Mutability in JavaScript?JavaScriptTackle Accessibility in React with JSXReactCan We Use For Loop to Loop Through Associative Arrays in PHP?PHPIN Operator in PostgreSQLPostgresWhat’s a repository on Github?Miscellaneous3 Common Usability Mistakes In Web DesignUI/UX