YogeshChauhan . com

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

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

WordPress get_posts ExamplesWordPressSolution for the error Commit failed – exit code 1 received in Desktop GithubMiscQuery to increment or decrement value in MySQL ignoring negative valuesSQL/MySQL4 different Ways to Get JavaScript OutputJavaScriptWhat is IPS(Intrusion Prevention System), How Does It Work and What are the Detection Types?MiscThe Difference Between Arrays and Objects in JavaScriptJavaScriptFULL OUTER JOIN in PostgresPostgresHow to use a Subquery to Insert Multiple Rows in SQL Table?SQL/MySQLHow to Commit and Rollback Changes in SQL?SQL/MySQLLearn how to add Scroll Indicator using CSS and JavaScript?CSSHow to use data-* Attributes in HTML?HTMLSocial Media Colors: LESS VariablesMisc