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 add Read More Read Less Button using JavaScript? #2 How to check if radio button is checked or not using JavaScript? #3 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

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
LEFT JOIN in PostgresPostgresHow to redirect or load a new document using JavaScript?JavaScriptDROP DATABASE (remove a database) from PostgresPostgresHow to add Go Back button in Swift 5?SwiftHow to import a CSS file using PHP code and not HTML code?PHPUnderstanding the confusing and handy “This” keyword in JavaScriptJavaScriptHow to apply style to a specific child element using CSS?CSSWordPress: How to query all posts from custom post type and display them in a list?WordPressHow to create an empty array in Swift?SwiftSolution to “Call to undefined function mysql_error()” in RevSlider WordPress PluginWordPressPHP __construct() functionPHPHow to Find the Highest (or Lowest) Number in an Array in JavaScript?JavaScript