Placeholder Selectors in SASS
Learn How to Use SASS Placeholders
Passionate Software Engineer with three years of experience, dedicated to creating robust and scalable web applications. I have a strong foundation in JavaScript, React, Python, and Node.js, and enjoy working with modern tech stacks to build innovative solutions. I'm committed to writing clean and efficient code, following best practices, and staying updated with the latest industry trends.
Throughout my career, I've gained valuable experience in full-stack development, including frontend design, backend development, and database management. I love solving complex problems and implementing creative solutions that enhance user experiences. I believe in the power of collaboration and thrive in cross-functional teams where I can contribute my skills and learn from others.
Beyond coding, I am an avid learner and enjoy sharing my knowledge with the developer community. I regularly contribute to open-source projects, write technical blog posts, and engage in discussions on emerging technologies. I'm always seeking opportunities to expand my skill set and stay at the forefront of software engineering.
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 the 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!
