Why SASS exists - Performance Evidence

Performance: Why SASS exists

MEDIUM IMPACT

SASS affects the CSS authoring process and indirectly impacts page load by enabling better organized and smaller CSS files.

Writing maintainable and efficient CSS styles

SASS

$primary-color: #3498db;
$alert-color: #e74c3c;
$padding: 1rem;
$radius: 0.5rem;

.button {
  background-color: $primary-color;
  color: white;
  padding: $padding;
  border-radius: $radius;
}
.alert {
  background-color: $alert-color;
  color: white;
  padding: $padding;
  border-radius: $radius;
}

Using variables reduces repetition and file size, making CSS easier to maintain and faster to load.

📈 Performance GainSmaller CSS files reduce blocking time and improve Largest Contentful Paint.

Writing maintainable and efficient CSS styles

SASS

/* Plain CSS with repeated code and no variables */
.button {
  background-color: #3498db;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
}
.alert {
  background-color: #e74c3c;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
}

Repeated CSS properties increase file size and make maintenance harder.

📉 Performance CostLarger CSS files increase download time and block rendering longer.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Plain CSS with repetition	N/A	N/A	Higher due to larger CSS	[X] Bad
SASS compiled optimized CSS	N/A	N/A	Lower due to smaller CSS	[OK] Good

Rendering Pipeline

SASS compiles to CSS before the browser loads the page, so it affects the critical rendering path by producing optimized CSS files that load faster.

→Network

→Style Calculation

→Layout

⚠️ BottleneckNetwork blocking due to large CSS files

Core Web Vital Affected

LCP

SASS affects the CSS authoring process and indirectly impacts page load by enabling better organized and smaller CSS files.

Optimization Tips

1Use SASS variables and mixins to avoid repeating CSS code.

2Smaller CSS files load faster and improve page speed.

3Optimized CSS reduces blocking time and improves LCP.

Performance Quiz - 3 Questions

How does using SASS improve CSS performance?

A By increasing the number of CSS files loaded

B By adding more complex selectors that slow rendering

C By reducing CSS file size through variables and mixins

D By delaying CSS loading until after page load

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by CSS files, and check file sizes and load times.

What to look for: Smaller CSS file sizes and faster load times indicate better performance from optimized SASS output.