Content blocks with @content in SASS - Performance & Optimization

Performance: Content blocks with @content

LOW IMPACT

This affects CSS preprocessing time and the final CSS bundle size, indirectly influencing page load speed.

Reusing styles with dynamic content blocks in Sass

SASS

@mixin button-style($color) {
  background-color: $color;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  font-weight: bold;
  @content;
}

.button-primary {
  @include button-style(blue) {
    color: white;
    text-transform: uppercase;
  }
}

.button-secondary {
  @include button-style(gray) {
    color: white;
    text-transform: uppercase;
  }
}

Using @content allows injecting unique styles without repeating common styles, reducing CSS duplication.

📈 Performance Gainreduces CSS bundle size by avoiding repeated rules

Reusing styles with dynamic content blocks in Sass

SASS

@mixin button-style($color) {
  background-color: $color;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  font-weight: bold;
  // Repeating styles without @content
  color: white;
  text-transform: uppercase;
}

.button-primary {
  @include button-style(blue);
  color: white;
  text-transform: uppercase;
}

.button-secondary {
  @include button-style(gray);
  color: white;
  text-transform: uppercase;
}

Repeating the same styles inside each mixin call causes duplicated CSS rules, increasing bundle size.

📉 Performance Costadds unnecessary CSS bytes, increasing bundle size and load time

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeating styles without @content	No impact	No impact	No impact	[X] Bad - larger CSS bundle
Using @content to inject styles	No impact	No impact	No impact	[OK] Good - smaller CSS bundle

Rendering Pipeline

Sass @content is processed at build time, so it does not affect browser rendering directly but impacts CSS size and load time.

→CSS Preprocessing

→Network Load

→Style Calculation

⚠️ BottleneckNetwork Load due to larger CSS files

Optimization Tips

1Use @content to inject unique styles inside reusable mixins.

2Avoid repeating common styles in multiple mixin calls to reduce CSS size.

3Remember @content is processed at build time, so it does not affect runtime rendering.

Performance Quiz - 3 Questions

How does using @content in Sass mixins affect CSS bundle size?

A It increases CSS bundle size by duplicating styles.

B It helps reduce CSS bundle size by avoiding repeated styles.

C It has no effect on CSS bundle size.

D It slows down browser rendering directly.

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by CSS files, and compare file sizes before and after using @content.

What to look for: Smaller CSS file size indicates better performance due to less duplicated CSS.