Sass Reference
Article
By Hugo Giraudel

Placeholders

By Hugo Giraudel

Sass supports a special type of selector called placeholders. Placeholders look like classes except the leading dot is replaced with a % sign. The distinctive feature of Sass placeholders is that they are not rendered in the result stylesheet. Indeed, they are meant to be extended using the @extend directive.

Think of Sass placeholders as classes that cannot be used in the HTML. They are fully reusable throughout the code, but only from the CSS side through @extend. This can come in handy when you want to draw CSS helpers that should not be compiled when unused.

Placeholders can be used in exactly the same way as classes or IDs, on their own or as part of compound selectors. Note that placeholders extensions respect the usual extend directives.

Example

%message {
    padding: 0.5em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

.message-error {
    @extend %message;
    color: red;
}

.message-valid {
    @extend %message;
    color: green;
}

.message-warning {
    @extend %message;
    color: orange;
}

.message-info {
    @extend %message;
    color: blue;
}

This code snippet will yield the following CSS:

.message-error, .message-valid, .message-warning, .message-info {
  padding: 0.5em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: bold;
}

.message-error {
  color: red;
}

.message-valid {
  color: green;
}

.message-warning {
  color: orange;
}

.message-info {
  color: blue;
}

As you can see, the placeholder selector %message has not been compiled in the resulting stylesheet. However, extends did work properly.

Engine compatibility

Placeholders are fully compatible across all Sass engines and there is no known bug to this day about their implementation.