Using placeholder selectors with the @extend directive

Placeholder selectors in Sass enable you to create selectors that can be extended but never outputted into the compiled CSS code.

Getting ready

This recipe reuses the code from the fourth step of the Utilizing the @extend directive recipe of this chapter. You can use the Ruby Sass compiler, as described in the Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass, to compile the Sass code in this recipe into CSS code.

How to do it...

After performing the following steps you have learn how to use placeholder selectors in your Sass code to avoid unused selectors in the compiled CSS code:

1. Copy the SCSS code from the fourth step of the Utilizing the @extend directive recipe of this chapter. In this SCSS, replace the .button selector three times with the %button placeholder selector. Now, your code should like that shown here:

    // scss-lint:disable ColorKeyword
   
   $default-color: red;
   $warning-color: orange;
   
   %button...