Placeholders - Chapter 9

Apart from the mixin and extend, there is one thing called placeholders too.  They are represented using %. Unlike the mixin, placeholders are extended using "@extend" .  The difference being, mixin accepts parameters, whereas placeholders doesnt. The compiler will throw an error in that case. Like mixin, this will also be present in the output only if it used.

Like the extend, this will also group the common properties and isolate the unique properties separately in another class.

%btn {     
  font-family: Arial;
  color: #ffffff;
  font-size: 28px;
  padding: 10px 30px 10px 30px;
  text-decoration: none; 
  color: white; 
}
.one{
   @extend %btn;
   background-color:red;
}
.two{
   @extend %btn;
   background-color:gold;
}
.three{
   @extend %btn;
   background-color:aqua;
}

The HTML would be :

Here the css output will be:

What if we create a parameterized placeholder?

I deliberately added a parameter. The compiler throws error as we have discussed earlier.