Yogesh Chauhan's Blog

@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 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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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 to get the height and width of an element using JavaScript?JavaScriptHow to add today’s date in HTML input date value using JavaScript?JavaScriptHow to hide a DIV on clicks outside of it using jQuery?jQueryWhat Does Host-Based Intrusion Detection System (HIDS) Mean and What Are Some Advantages Over NIDS?MiscellaneousWhat’s a Web Storage API in JavaScript?JavaScriptGive buttons accessible namesUI/UXHow to embed YouTube or other video links in WordPress?WordPressHow to uninstall Cocoapods from the Mac OS?MiscellaneousMicroservices vs Monolithic ArchitectureMiscellaneousABS and NEG functions in Envision BasicEnvision BasicHow to add a ribbon on top of a container using CSS?CSSWordPress: How to print ACF array field values?WordPress