sass-site/source/documentation/style-rules/placeholder-selectors.html.md.erb

---
title: Placeholder Selectors
introduction: >
  Sass has a special kind of selector known as a “placeholder”. It looks and
  acts a lot like a class selector, but it starts with a `%` and it's not
  included in the CSS output. In fact, any complex selector (the ones between
  the commas) that even *contains* a placeholder selector isn't included in the
  CSS, nor is any style rule whose selectors all contain placeholders.
---

<%= partial "code-snippets/example-placeholder" %>

What's the use of a selector that isn't emitted? It can still be [extended][]!
Unlike class selectors, placeholders don't clutter up the CSS if they aren't
extended and they don't mandate that users of a library use specific class names
for their HTML.

[extended]: ../at-rules/extend

<% example do %>
  %toolbelt {
    box-sizing: border-box;
    border-top: 1px rgba(#000, .12) solid;
    padding: 16px 0;
    width: 100%;

    &:hover { border: 2px rgba(#000, .5) solid; }
  }

  .action-buttons {
    @extend %toolbelt;
    color: #4285f4;
  }

  .reset-buttons {
    @extend %toolbelt;
    color: #cddc39;
  }
  ===
  %toolbelt
    box-sizing: border-box
    border-top: 1px rgba(#000, .12) solid
    padding: 16px 0
    width: 100%

    &:hover
      border: 2px rgba(#000, .5) solid

  .action-buttons
    @extend %toolbelt
    color: #4285f4


  .reset-buttons
    @extend %toolbelt
    color: #cddc39
<% end %>

Placeholder selectors are useful when writing a Sass library where each style
rule may or may not be used. As a rule of thumb, if you're writing a stylesheet
just for your own app, it's often better to just extend a class selector if one
is available.