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.

SCSS Syntax

.alert:hover, %strong-alert {
 font-weight: bold;
}

%strong-alert:hover {
 color: red;
}

Sass Syntax

.alert:hover, %strong-alert
 font-weight: bold


%strong-alert:hover 
 color: red

CSS Output

.alert:hover {
 font-weight: bold;
}

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.

SCSS Syntax

%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;
}

Sass Syntax

%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

CSS Output

.action-buttons, .reset-buttons {
 box-sizing: border-box;
 border-top: 1px rgba(0, 0, 0, 0.12) solid;
 padding: 16px 0;
 width: 100%;
}
.action-buttons:hover, .reset-buttons:hover {
 border: 2px rgba(0, 0, 0, 0.5) solid;
}

.action-buttons {
 color: #4285f4;
}

.reset-buttons {
 color: #cddc39;
}

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.