Why Content blocks with @content in SASS? - Purpose & Use Cases

The Big Idea

Discover how a tiny Sass feature can save you hours of repetitive styling work!

The Scenario

Imagine you want to create a button style that sometimes has an icon, sometimes just text, and sometimes both. You write separate styles for each case, repeating lots of code.

The Problem

Every time you want a slightly different button, you copy and change the styles. This wastes time, causes mistakes, and makes your code messy and hard to update.

The Solution

Using @content lets you write a reusable style block that accepts extra styles inside it. You keep your main style clean and add custom parts only where needed.

Before vs After

✗ Before

.button-primary { background: blue; color: white; padding: 1rem; }
.button-primary-icon { background: blue; color: white; padding: 1rem; display: flex; align-items: center; }

✓ After

@mixin button-primary { background: blue; color: white; padding: 1rem; @content; }
.button-primary { @include button-primary; }
.button-primary-icon { @include button-primary { display: flex; align-items: center; } }

What It Enables

You can create flexible, reusable styles that adapt easily without repeating or rewriting code.

Real Life Example

Think of a website with many buttons: some have icons, some have badges, some have animations. With @content, you write one button style and add only the special parts where needed.

Key Takeaways

Writing styles manually for each variation is slow and error-prone.

@content lets you insert custom styles inside reusable blocks.

This keeps your code clean, DRY, and easy to maintain.