DEV Community

Cover image for Placeholder Selectors in SASS
Richard Rembert
Richard Rembert

Posted on • Edited on

Placeholder Selectors in SASS

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;
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)