Placeholder selectors with % in SASS

Introduction

Placeholder selectors let you write reusable styles without creating extra CSS on their own. They help keep your code clean and avoid repeating yourself.

You want to share common styles between multiple CSS classes.

You want to avoid generating unused CSS rules in your final stylesheet.

You want to organize your styles better by grouping shared styles.

You want to keep your CSS file smaller and faster to load.

Syntax

SASS

%placeholder-name { property: value; }

Placeholder selectors start with a percent sign (%) and are not output directly in CSS.

You use @extend %placeholder-name; inside other selectors to reuse the styles.

Examples

This defines a placeholder with common button styles.

SASS

%button-base {
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

This class reuses the placeholder styles and adds its own color.

SASS

.primary-button {
  @extend %button-base;
  background-color: blue;
  color: white;
}

Another class reusing the same placeholder with different colors.

SASS

.secondary-button {
  @extend %button-base;
  background-color: gray;
  color: black;
}

Sample Program

This example shows a placeholder %card-style with common card styles. Two card classes reuse it and add different border colors. The body has a slightly darker background for contrast.

SASS

@use 'sass:color';

%card-style {
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  background-color: white;
}

.card-primary {
  @extend %card-style;
  border: 2px solid blue;
}

.card-secondary {
  @extend %card-style;
  border: 2px solid gray;
}

body {
  background-color: color.scale(white, $lightness: -10%);
  font-family: Arial, sans-serif;
  padding: 2rem;
}

Important Notes

Placeholder selectors do not appear in the final CSS unless extended.

Using @extend with placeholders helps avoid duplicate CSS rules.

Placeholders improve maintainability by centralizing shared styles.

Summary

Placeholder selectors start with % and hold reusable styles.

Use @extend %placeholder-name; to apply those styles to other selectors.

They keep your CSS smaller and easier to manage.