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


a{
  padding: .2em;
  line-height: 1;
}

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


a:hover{
  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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
JavaScript Data Types and Data Structures Things to RememberJavaScriptHow to add Local State to a Class in React?Reactfirst-of-type and last-of-type selectors in CSSCSSHow to auto-resize textarea based on text input using JavaScript or jQuery?JavaScriptRelative Length Units in CSSCSSHow to center an image horizontally and vertically?CSSIs Software Really Eating The World? I don’t think soMiscellaneousOpen Source Security Tools for Defense SecurityMiscellaneousHow to add a ribbon on top of a container using CSS?CSSWhat’s the difference between a Framework and a Library?MiscellaneousHow to Skip or Exclude a Specific URL or File From .htaccess Rewrite Rule?PHPWhat does Containment mean in React?React