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 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 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
What’s a Strict mode in JavaScript?JavaScriptThe unique operator($) in Envision BasicEnvision BasicHow to calculate elapsed time in JavaScript?JavaScriptsubstring() Method in JavaScriptJavaScriptHow to add AppRoutingModule in Angular application using command line?AngularSolution for the error Commit failed – exit code 1 received in Desktop GithubMiscellaneousThe Complete Basic Explanation of PHP SessionsPHPLearn to Implement Estimated Reading Time using PHP Part 2: Final Implementation with Source CodePHPThe fundamental difference between HAVING and WHERE clauses in PostgresPostgres5 Ways to Loop Through JavaScript ArraysJavaScriptHow to create and store JSON objects in localStorage using JavaScript?JavaScriptHow to remove WordPress TinyMCE Editor buttons?WordPress