SASSmarkup~10 mins

@use directive for imports in SASS - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - @use directive for imports

Read main.scss

↓

Find @use directive

↓

Load _variables.scss

↓

Compile variables into namespace

↓

Apply styles using namespace

↓

Generate CSS output

The browser or Sass compiler reads the main file, finds the @use directive, loads the imported file as a namespace, applies styles using that namespace, and then outputs the final CSS.

Render Steps - 3 Steps

Code Added:@use 'variables';

Before

[h1]
Color: default (black)
Font-size: default (medium)

Hello World

→

After

[h1]
Color: #3498db (blue)
Font-size: default (medium)

Hello World

The @use directive imports the variables file, allowing access to $primary-color. The h1 color changes to the imported blue color.

🔧 Browser Action:Loads variables namespace and applies color property

Code Sample

This code imports variables from another Sass file using @use, then applies those variables to style the heading with color and font size.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Use Directive Example</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

SASS

@use 'variables';

h1 {
  color: variables.$primary-color;
  font-size: variables.$font-size;
}

// _variables.scss
$primary-color: #3498db;
$font-size: 2rem;

Render Quiz - 3 Questions

Test your understanding

After applying step 1, what visual change do you see on the heading?

AThe heading text color changes to blue

BThe heading text becomes bold

CThe heading text disappears

DThe heading text size increases

Common Confusions - 2 Topics

Why do I have to write variables.$primary-color instead of just $primary-color?

Because @use loads the file as a namespace to avoid naming conflicts, you must prefix variables with the namespace name.

💡 Think of @use like a folder: you access items inside by folder name.variable

Why doesn't my variable work if I use @import instead of @use?

@import merges all variables globally, which can cause conflicts. @use keeps variables scoped, so you must use the namespace.

💡 @use is like a safe box; @import dumps everything in one big box

Property Reference

Property	Value Applied	Namespace Usage	Visual Effect	Common Use
@use	'variables'	variables.$variable-name	Imports variables and functions with namespace	Modular Sass imports
color	variables.$primary-color	variables.$primary-color	Changes text color	Styling text colors
font-size	variables.$font-size	variables.$font-size	Changes text size	Adjusting font sizes

Concept Snapshot

@use directive imports Sass files as namespaces. Variables and functions must be accessed with namespace prefix. Prevents naming conflicts by scoping imports. Replaces older @import for modular Sass. Example: @use 'variables'; then use variables.$varName.