@use directive for imports in SASS - Performance & Optimization

Performance: @use directive for imports

MEDIUM IMPACT

This affects CSS build time and runtime style calculation by managing how stylesheets are imported and scoped.

Importing shared styles or variables in multiple Sass files

SASS

@use 'variables' as vars;

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

The @use directive imports the file once and scopes variables, preventing duplication.

📈 Performance GainReduces CSS size and speeds up style calculation, improving LCP

Importing shared styles or variables in multiple Sass files

SASS

@import 'variables';
@import 'variables';

.button {
  color: $primary-color;
}

Repeated @import causes the same file to be included multiple times, increasing CSS size and build time.

📉 Performance CostAdds redundant CSS rules, increasing CSS file size and blocking rendering longer

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
@import repeated	N/A	N/A	High due to large CSS	[X] Bad
@use once with namespace	N/A	N/A	Lower due to smaller CSS	[OK] Good

Rendering Pipeline

The @use directive affects the CSS compilation step before the browser renders. It controls how stylesheets are combined and scoped, impacting style calculation and layout.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to redundant or large CSS

Core Web Vital Affected

LCP

This affects CSS build time and runtime style calculation by managing how stylesheets are imported and scoped.

Optimization Tips

1Use @use to import Sass files once and scope variables.

2Avoid multiple @import of the same file to prevent CSS duplication.

3Smaller CSS files improve style calculation and LCP.

Performance Quiz - 3 Questions

What is a key performance benefit of using @use instead of @import in Sass?

A It automatically minifies CSS files

B It imports styles only once and scopes variables to avoid duplication

C It delays CSS loading until after page load

D It converts Sass to CSS faster at runtime

DevTools: Network

How to check: Open DevTools > Network tab > filter by CSS files > check CSS file sizes and number of requests

What to look for: Look for smaller CSS file size and fewer duplicate styles indicating efficient imports