YogeshChauhan . com

@use rule in SCSS (Sass)

in SCSS on May 10, 2021

The @use rule is basically like @import, it loads variables, mixins, functions from other SassScript stylesheets.

Stylesheets loaded via @use rule are called “modules”.

This is how you can write the @use rule:

@use "./variables.scss";

Stylesheets loaded with @use rule are only included once in the CSS after compilation, even if you include it multiple times.

That’s why it’s better to import files by @use rule rather than @import rule.

You must always add the @use rules before any other rules except @forward rules.

@use rule Example

Let’s say you have a separate stylesheet for links style, “basic/_links.scss

  padding: .2em;
  line-height: 1;

and another stylesheet for link hover state, “basic/_hover.scss

  color: yellow;

This is how you include those those stylesheets:

@use 'basic/links';
@use 'basic/hover';


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

How to add a select dropdown in React?ReactAll possible ways you can Insert Data in PostgresPostgresHow to use GROUPING SETS to boost GROUP BY queries in Postgres?PostgresIN and BETWEEN Operators in SQLSQL/MySQLIs there a way to do a FULL OUTER JOIN in MySQL?SQL/MySQLSelector Lists and Combinators in SCSS (Sass)SCSSHow states work in React?React5 Ways to Loop Through JavaScript ArraysJavaScriptCan Firewall and IDPS Stop DDoS Attack?MiscWordPress: How to add a Search Icon in Menus with toggle effect using jQuery?jQueryWhat is an API?MiscHow to create a smooth scrolling effect with CSS?CSS