@use directive for imports in SASS - Browser Rendering Trace

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

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

A The heading text color changes to blue

B The heading text becomes bold

C The heading text disappears

D The 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.

Practice

1. What is the main purpose of the @use directive in Sass?

easy

A. To import Sass files with a namespace to avoid conflicts

B. To directly copy CSS styles without any namespace

C. To run JavaScript code inside Sass files

D. To export variables from Sass files

Solution

1. Step 1: Understand the role of @use

   The @use directive imports Sass files and applies a namespace to their contents.

2. Step 2: Compare with other import methods

   Unlike @import, @use avoids naming conflicts by requiring namespace prefixes.

3. Final Answer:

   To import Sass files with a namespace to avoid conflicts -> Option A

4. Quick Check:

   @use adds namespace = C [OK]

Hint: Remember: @use always adds a namespace [OK]

Common Mistakes:

• Thinking @use copies styles without namespace
• Confusing @use with JavaScript execution
• Believing @use exports variables

2. Which of the following is the correct syntax to import a Sass file named colors.scss using @use?

easy

A. @use 'colors';

B. @use colors.scss;

C. @use "colors.scss";

D. @use colors;

Solution

1. Step 1: Check correct quoting and file extension

   The @use directive requires the file path as a string without the extension, usually quoted.

2. Step 2: Validate options

   @use 'colors'; uses quotes and omits the extension, which is correct. Options B and C include the extension incorrectly or wrong quotes. @use colors; lacks quotes.

3. Final Answer:

   @use 'colors'; -> Option A

4. Quick Check:

   Quotes + no extension = D [OK]

Hint: Use quotes and omit .scss extension in @use [OK]

Common Mistakes:

• Including the .scss extension inside @use
• Not using quotes around the file name
• Using double quotes inconsistently

3. Given the following Sass files, what will be the color of the h1 text?

@use 'colors';
h1 {
  color: colors.$primary;
}

// colors.scss
$primary: blue;
$secondary: green;

medium

A. green

B. black

C. red

D. blue

Solution

1. Step 1: Identify the imported variables

   The @use 'colors'; imports variables with the namespace colors. The variable $primary is set to blue.

2. Step 2: Check the usage in h1

   The color is set to colors.$primary, which refers to blue.

3. Final Answer:

   blue -> Option D

4. Quick Check:

   Namespace + variable = blue [OK]

Hint: Namespace.variable accesses imported values [OK]

Common Mistakes:

• Forgetting to use the namespace prefix
• Confusing $primary with $secondary
• Assuming default color without import

4. What is wrong with this Sass code?

@use 'theme';
h1 {
  color: $main-color;
}

// theme.scss
$main-color: red;

medium

A. The file path must include the .scss extension

B. Using as * is invalid syntax in @use

C. Variables must be accessed with namespace prefix unless configured

D. Variables cannot be used inside selectors

Solution

1. Step 1: Understand @use namespace behavior

   By default, variables must be accessed with the namespace prefix unless as * is used to remove it.

2. Step 2: Check the code usage

   The code uses @use 'theme'; without as *, so variables must be accessed with the theme. prefix, but $main-color is used without it, causing an undefined variable error.

3. Step 3: Identify the actual problem

   Without as *, the prefix is required, so Variables must be accessed with namespace prefix unless configured identifies the issue.

4. Final Answer:

   Variables must be accessed with namespace prefix unless configured -> Option C

5. Quick Check:

   Default namespace prefix required = A [OK]

Hint: Use namespace or as * to access variables directly [OK]

Common Mistakes:

• Thinking as * is invalid syntax
• Forgetting to prefix variables without as *
• Including .scss extension in @use

5. You want to import variables.scss but rename its namespace to vars and override the variable $font-size to 1.5rem. Which @use syntax is correct?

hard

A. @use 'variables' as vars ($font-size: 1.5rem);

B. @use 'variables' as vars with ($font-size: 1.5rem);

C. @use 'variables' with ($font-size: 1.5rem) as vars;

D. @use 'variables' rename vars with ($font-size: 1.5rem);

Solution

1. Step 1: Recall @use syntax for renaming and configuring

   The correct syntax is @use 'file' as namespace with (variable overrides);.

2. Step 2: Match options to syntax

   @use 'variables' as vars with ($font-size: 1.5rem); matches the correct order and syntax. Options B, C, and D have incorrect order or keywords.

3. Final Answer:

   @use 'variables' as vars with ($font-size: 1.5rem); -> Option B

4. Quick Check:

   Namespace + with (overrides) = A [OK]

Hint: Use as then with for renaming and overrides [OK]

Common Mistakes:

• Swapping as and with order
• Using invalid keywords like rename
• Omitting parentheses around overrides