In SASS a placeholder looks and acts a lot like a class selector, only it starts with a % and it is 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 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.
Why Use Placeholders?
Placeholder selectors are mainly useful when writing a SASS library where each style rule is optional.
Typically, when working on your own project, it’s often better to just extend a class selector instead. But it’s good to know, as it could come in quite handy if you start working on larger-scale projects.
In the next article, we’ll learn how to structure our SASS projects.
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here
Top comments (0)