Placeholder Selectors in SASS

#programming #productivity #webdev #tutorial

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