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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#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 #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
What is the difference between let and var in Swift?SwiftOptional arguments, Default parameters and REST parameters in JavaScriptJavaScriptSafe Practice to add Links to cross-origin destinationUI/UXHow to add a select dropdown in React?ReactHow to define visibility for a property in PHP?PHPHow to clean up after a plugin uninstall in WordPress?WordPress4 different Ways to Get JavaScript OutputJavaScriptHow to add AppRoutingModule in Angular application using command line?AngularHow to add a ribbon on top of a container using CSS?CSSHow to add Go Back button in Swift 5?SwiftThe Difference Between the echo and print Commands in PHPPHPThe 8 Golden Rules of Programming I Have Learned in My CareerMiscellaneous