Introduction to Sass & SCSS Placeholders

Sass placeholders are special selectors defined with a % symbol that let you write reusable styles without creating extra CSS classes. They are only included in the final CSS when extended, which helps keep your code cleaner and output smaller.

In this tutorial, we will learn what Sass placeholders are, why they are useful, and how to use them effectively in your Sass and SCSS projects.

What are Placeholders?

Placeholders are style blueprints defined with a % selector that do not output CSS unless extended with @extend, helping reduce redundancy and keep stylesheets clean.

  • Defined using the % symbol before the selector name
  • Not rendered in the CSS unless extended
  • Used to group common styles for reuse
  • Provide a clean way to avoid repeating code

Simple Placeholder

SCSS Code
Sass Code
CSS Code
%btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

%btn
    display: inline-block
    padding: 10px 20px
    border-radius: 4px
    font-weight: bold
    text-align: center

Placeholders alone do not generate CSS. They must be extended with @extend to appear in the final stylesheet.

Extending Placeholder

SCSS Code
Sass Code
CSS Code
%btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

.primary-btn {
    @extend %btn;
    background: #007bff;
    color: #fff;
}

.secondary-btn {
    @extend %btn;
    background: #6c757d;
    color: #fff;
}

%btn
    display: inline-block
    padding: 10px 20px
    border-radius: 4px
    font-weight: bold
    text-align: center

.primary-btn
    @extend %btn
    background: #007bff
    color: #fff

.secondary-btn
    @extend %btn
    background: #6c757d
    color: #fff

Explanation:

  • %btn defines a reusable placeholder style.
  • @extend %btn applies those styles to new classes.
  • CSS combines shared styles, reducing duplication.

Advanced Usage of Sass Placeholders

Understand advanced usage of Sass placeholders with the following example.

Advanced Placeholder Example

SCSS Code
Sass Code
CSS Code
Placeholder in SCSS syntax
%card-base {
    display: block;
    padding: 16px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

%card-interactive {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    &:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    }
}

.card {
    @extend %card-base;
    @extend %card-interactive;
    color: #222;
}

.card--featured {
    @extend %card-base;
    border: 2px solid #ffd166;
    background: linear-gradient(180deg, #fff, #fffaf0);
}
Placeholder in Sass syntax
%card-base
    display: block
    padding: 16px
    border-radius: 6px
    background: #fff
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06)

%card-interactive
    transition: transform 0.15s ease, box-shadow 0.15s ease
    &:hover
        transform: translateY(-4px)
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12)

.card
    @extend %card-base
    @extend %card-interactive
    color: #222

.card--featured
    @extend %card-base
    border: 2px solid #ffd166
    background: linear-gradient(180deg, #fff, #fffaf0)

Explanation:

  • %card-base holds common layout and visual rules
  • %card-interactive adds transitions and hover behavior
  • .card composes both placeholders for full behavior
  • .card--featured extends base and adds special styles
  • Extending multiple placeholders composes features without duplication

Why Use Placeholder Selectors in Sass?

Placeholders make your styles more efficient and organized by reducing redundancy in your Sass or SCSS files. Key benefits of using placeholders in Sass are:

  • Reduce repeated code and CSS bloat
  • Improve maintainability of styles
  • Ensure consistent styling across multiple selectors
  • Useful in large projects with shared design patterns

Differences Between Placeholders and Mixins

Although both placeholders and mixins help reuse code, they work differently.

  • Placeholders use @extend, mixins use @include
  • Placeholders merge selectors, mixins duplicate code
  • Mixins can accept arguments, placeholders cannot
  • Placeholders reduce final CSS size, mixins may increase it
  • Placeholders cannot output standalone CSS, mixins can
  • Mixins are more flexible for dynamic styles, placeholders are best for static reusable rules
  • Placeholders are designed for inheritance, mixins are for functionality and logic

Using Placeholders with Class Variants

Placeholders pair well with normal classes to provide base styles and allow per-class overrides.

  • Extend for shared base, then add class specific rules for variations
  • Placeholders keep base rules centralized, classes handle differences
  • You can use mixins for dynamic behavior, and placeholders for static shared rules
  • Prefer placeholders for structural styles, prefer mixins for parameterized patterns

Best Practices for Placeholders

Use Sass placeholders to share static styles, to keep output compact and predictable.

  • Prefer mixins for parameterized or dynamic styles
  • Name placeholders clearly, use readable prefixes like %base- or %util-
  • Keep placeholders focused, one concern per placeholder
  • Avoid extending very generic placeholders across many selectors
  • Group placeholders in partials by component or theme
  • Check compiled CSS to prevent selector bloat
  • Combine @extend with class-specific rules for variants
  • Do not extend third party selectors, use local placeholders instead
  • Document placeholder intent and recommended usage
  • Limit deep nesting when extending, to keep selectors simple