placeholders in sass
many times, we need to inherit a class in sass to build over some basic css that it provides. one example could be different type of messages(success, warning, error etc.) to be displayed in an application. these message styles differ only in the displayed color and have all other properties same. we could create a base class for common message properties:
and then inherit this class using @extend directive:
this will result into below css:
let’s see the effect on generated css using placeholder selectors. the sass syntax is exactly same as a class selector except we declare these with % character instead of . character at the start.
let’s create our %msg placeholder:
and extend this in specific classes:
the resulted css would be:
this is same as when we extended a class selector except one subtle difference. there is no .msg class generated this time, which is the beauty of placeholders. we can use it in cases when we define some classes with only purpose to extend it for specific use cases and don’t really use the base class. this is when we should definitely use placeholders to keep the compiled css smaller in size.
