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)