How to Use SCSS %placeholder in Real World
Handling CSS properties that you can combine and reuse in project libraries that you don’t need to rewrite again.
Placeholder in web development is very useful for your front end web development workflow. Placeholder help you to be more productive without rewriting properties all over again that you need in your CSS library.
SASS / SCSS has a placeholder function that you can use in your projects. You can customise your needs and made a small library out of it. Include placeholders in your SCSS and use them every time you want it in your project. If you unfamiliar with SASS / SCSS, you can read my post about it in here and here. In this next post, I will show you how to use %placeholder in real world of front end development.
HTML Setup :
SCSS Placeholder setup :
CSS / The result :
Placeholder could be used in any of CSS Properties such as :hover, ::before, ::after and many other.
HTML Setup for SCSS %placeholder in :hover properties :
SCSS setup %placeholder in :hover properties :
CSS result %placeholder in :hover :
HTML Setup for %placeholder on ::before and ::after property :
Using SCSS %placeholder in ::before and ::after property :
CSS result on our %placeholder on ::before and ::after property :
Result on our SCSS %placeholder final project :
I use placeholder a lot in all my projects. Placeholder is very helpful for any case that no need to rewrites CSS properties all over again. Thank you for stopping by and reading this. Feel free to comments and contact me regarding this post.
Reference :
https://sass-lang.com/documentation/style-rules/placeholder-selectors
