0
0
SASSmarkup~8 mins

@import to @use migration in SASS - Performance & Optimization

Choose your learning style9 modes available
Performance: @import to @use migration
MEDIUM IMPACT
This affects CSS build time and runtime style calculation by improving modularity and reducing redundant style processing.
Including shared styles in multiple Sass files
SASS
@use 'variables' as *;
@use 'mixins';
@use loads each module once and namespaces variables, avoiding duplication and improving build efficiency.
📈 Performance Gainsingle style processing per module, smaller CSS output
Including shared styles in multiple Sass files
SASS
@import 'variables';
@import 'mixins';
@import 'variables';
Repeated @import causes styles and variables to be processed multiple times, increasing build size and slowing compilation.
📉 Performance Costtriggers redundant style processing and larger CSS output
Performance Comparison
PatternDOM OperationsReflowsPaint CostVerdict
@import repeated modulesN/AN/AHigher due to larger CSS[X] Bad
@use single module importN/AN/ALower due to smaller CSS[OK] Good
Rendering Pipeline
Sass @import causes repeated style inclusion increasing CSS size and style recalculation. @use loads modules once, reducing CSS size and improving style calculation.
Style Calculation
Layout
Paint
⚠️ BottleneckStyle Calculation due to redundant CSS rules
Core Web Vital Affected
LCP
This affects CSS build time and runtime style calculation by improving modularity and reducing redundant style processing.
Optimization Tips
1Use @use to load Sass modules once and avoid duplication.
2Avoid multiple @import of the same file to reduce CSS size.
3Namespace variables with @use to prevent conflicts and improve maintainability.
Performance Quiz - 3 Questions
Test your performance knowledge
What is a main performance benefit of using @use instead of @import in Sass?
AIt allows inline JavaScript in styles
BModules are loaded only once, reducing CSS size
CIt automatically minifies CSS
DIt disables CSS caching
DevTools: Network
How to check: Open DevTools > Network tab > Reload page > Check CSS file size and number of CSS files loaded
What to look for: Smaller CSS file size and fewer duplicate styles indicate good @use usage