Placeholders
In this lesson, we'll be looking at SASS placeholders.
We'll cover the following
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.
Get hands-on with 1200+ tech skills courses.