Importing built-in modules with @use in SASS - Performance & Optimization

Performance: Importing built-in modules with @use

MEDIUM IMPACT

This affects the CSS build time and the final CSS size, impacting page load speed and render time.

Including Sass built-in modules in stylesheets

SASS

@use "sass:math";

.selector {
  width: math.div(100%, 3);
}

@use loads the module once, scopes variables and functions, and avoids duplication.

📈 Performance Gainreduces build time and CSS size, improving LCP

Including Sass built-in modules in stylesheets

SASS

@import "sass:math";

.selector {
  width: math.div(100%, 3);
}

Using @import loads the module multiple times and can cause duplicated CSS and slower builds.

📉 Performance Costincreases build time and final CSS size, blocking rendering longer

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
@import built-in module multiple times	N/A	N/A	Larger CSS causes slower paint	[X] Bad
@use built-in module once with namespace	N/A	N/A	Smaller CSS improves paint speed	[OK] Good

Rendering Pipeline

Sass @use imports modules at build time, affecting how CSS is generated and delivered to the browser.

→Build Time

→Network Transfer

→Style Calculation

⚠️ BottleneckBuild Time due to redundant imports and larger CSS files

Core Web Vital Affected

LCP

This affects the CSS build time and the final CSS size, impacting page load speed and render time.

Optimization Tips

1Always prefer @use over @import for Sass built-in modules.

2Use @use to load modules once and avoid duplicated CSS code.

3Scoped imports with @use improve build time and reduce CSS size.

Performance Quiz - 3 Questions

Why is using @use to import Sass built-in modules better than @import?

A Because @import is faster to build

B Because @use adds more CSS code

C Because @use loads modules once and avoids duplication

D Because @import scopes variables better

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and check CSS file size and load time.

What to look for: Smaller CSS file size and faster load time indicate better performance with @use.