Placeholder selector in SCSS

Sass full form is  “Syntatically Awesome Style Sheets” and it is preprocessing CSS library which allows us to use various cool feature like variable, function, nesting, mixins, placeholder etc. I love all of these features because it make my life easy and create style dynamically. Today i will discuss one feature of Sass which is known as “Placeholder selector in Sass”.

 

Sass Placeholder feature is very useful in cases where you need to extend same class into multiple classes and exclude that class from final css. This will reduce your code little bit. Let’s dive into code: Let’s say you have “icons” class which you wanna extends in all icons style.

Now you wanna extend above icon class in all below icons :

  • .icon_Check-box_filled
  • .icon_Check-box
  • .icon_Docs

One way of achieving is use extend which will add icon class style in all above classes but itself remain in the result style as follow:

After SCSS compilation, Above will become :

Since we don’t require icon class in final CSS code. So for this SCSS comes with the concept of “Placeholder selector in SCSS”. Now let’s replace placeholder with extend and see how it change above code.

Now after scss compilation, above code will become:

As you can see source icon class is no more there in final code. You can use this strategy where source class is no more required after using it in final codebase.

Keep on coding, Happy Styling …. 🙂

 

Reference Links:

http://thesassway.com/intermediate/understanding-placeholder-selectors

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *