Content blocks with @content in SASS

Introduction

Content blocks with @content let you pass a chunk of styles into a mixin. This helps you reuse code and keep your styles organized.

You want to create a reusable style wrapper that can accept different inner styles.

You need to apply common styles but customize some parts inside.

You want to keep your CSS DRY (Don't Repeat Yourself) by sharing style blocks.

You want to write cleaner and more readable Sass code by separating concerns.

Syntax

SASS

@mixin mixin-name {
  /* common styles here */
  @content;
}

The @content directive is a placeholder for styles passed when you include the mixin.

You use @include mixin-name { ... } to pass the styles inside the curly braces.

Examples

This mixin adds a border and padding, then inserts extra styles like background color.

SASS

@mixin box {
  border: 1px solid black;
  padding: 1rem;
  @content;
}

.container {
  @include box {
    background-color: lightblue;
  }
}

The mixin sets font weight, and the included block adds color and background.

SASS

@mixin button-style {
  font-weight: bold;
  @content;
}

.button {
  @include button-style {
    color: white;
    background-color: blue;
  }
}

Sample Program

This example creates a card mixin with border, padding, and background color. The @content lets you add extra styles when you include it. The .article and .note classes use the mixin but add their own unique styles inside the block.

SASS

@use 'sass:color';

@mixin card {
  border: 2px solid black;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background-color: color.scale(white, $lightness: -10%);
  @content;
}

.article {
  @include card {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  }
}

.note {
  @include card {
    background-color: color.scale(yellow, $lightness: -20%);
    font-style: italic;
  }
}

Important Notes

You can only use @content inside mixins, not in regular selectors.

If you don't pass any content when including the mixin, @content is simply ignored.

Using @content helps keep your Sass modular and easier to maintain.

Summary

@content lets you pass custom styles into a mixin.

Use it to create flexible, reusable style blocks.

It keeps your code clean and avoids repetition.