Placeholders

For Example: #

In SASS a placeholder looks and acts a lot like a class selector, only it starts with a % and it’s not included in the CSS output.

Our %placeholder selector contains some width and height declarations:

%placeholder {
    width: 100%;
    height: 100%;
}
body {
    @extend %placeholder;
}
p {
    @extend %placeholder;
}

Note that we’ve used the @extend directive, which (as we saw previously) allows one selector to inherit styles of another selector.

This outputs to CSS as follows:

body, p {
    width: 100%;
    height: 100%;
}

Simple and as expected!

However, the preprocessor will skip %placeholder and it won’t be included in the final CSS file.