Utilizing the @extend directive

If the styling of an HTML element requires more than one class, you can use the @extend directive to merge these classes into a single class. In this recipe, you will learn how to use the @extend directive for your projects.

Getting ready

Read the Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass, to find out how to install Ruby Sass. You can use the Ruby Sass compiler to compile the Sass code in this recipe into CSS code.

How to do it...

Learn how to use the @extend directive to create a list of selectors that share the same properties:

1. Create an HTML file that will contain the following HTML code used to style two buttons:

      <button class="button button-default">Default</button>
        <button class="button button-alert">Alert</button>

2. Then, create your SCSS code to style the buttons from the first step. This SCSS code will look as follows:

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