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

title	introduction
Placeholder Selectors	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.

{% render '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.

{% codeExample 'extended-selector' %} %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 {% endcodeExample %}

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.