@import to @use migration in SASS - Browser Rendering Trace

Render Flow - @import to @use migration

Read @import statement

→Fetch and insert file content

↓

Potential conflicts if names clash

↓

Read @use statement

→Fetch file content as module

↓

Explicit access via namespace

→Avoid global conflicts

The browser or Sass compiler reads @import by inserting the file content globally, which can cause conflicts. @use loads the file as a module with its own namespace, preventing conflicts and improving clarity.

Render Steps - 3 Steps

Code Added:@import 'colors';

Before

[No variables available]
.button { color: undefined; }

→

After

[Variables from colors.scss available globally]
.button { color: $primary-color; }

@import brings all variables and mixins from colors.scss into the global scope, so $primary-color is accessible anywhere.

🔧 Browser Action:Sass compiler reads colors.scss and merges its content globally.

Code Sample

Shows how a Sass file using @import to bring in variables globally is migrated to @use with namespace, requiring explicit prefix to access variables.

SASS

@import 'colors';

.button {
  color: $primary-color;
}

// Migrated to

@use 'colors' as c;

.button {
  color: c.$primary-color;
}

Render Quiz - 3 Questions

After applying step 2, how must you access the $primary-color variable?

A With the namespace prefix, like c.$primary-color

B Directly as $primary-color without prefix

C Using @import again

D By redefining the variable locally

Common Confusions - 2 Topics

Why does $primary-color become undefined after switching from @import to @use?

Because @use loads files as modules with namespaces, variables are no longer global. You must prefix variables with the namespace (e.g., c.$primary-color).

💡 If variables are undefined, check if you need to add the namespace prefix after @use.

Can I still use variables without a namespace after @use?

No, @use requires explicit namespace to avoid conflicts. You can rename the namespace to something shorter if needed.

💡 Use @use 'file' as alias; then access variables as alias.$variable.

Property Reference

Directive	Scope	Namespace	Conflict Risk	Usage Style
@import	Global	None	High (variables can clash)	Variables accessible directly
@use	Module	Required or optional alias	Low (namespaced access)	Variables accessed with namespace prefix

Concept Snapshot

@import loads Sass files globally, merging variables and mixins into one scope. @use loads files as modules with namespaces, requiring explicit prefixes. @use prevents variable conflicts and improves code clarity. Migrating means replacing @import with @use and adding namespace prefixes. Use aliases to shorten namespaces if needed.