When extending a selector, it will extend all the occurrences of the selector. This recipe shows why you should use the @extend
directive with care to prevent your CSS code from containing unwanted or unexpected selectors.
You can use either the Ruby Sass compiler or the online SassMeister compiler to compile the SCSS of this recipe into static CSS code. More information about the Ruby Sass compiler and SassMeister can be found in the Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass, and the Playing on SassMeister recipe of Chapter 2, Debugging Your Code.
Perform the following steps to understand why you should use the @extend
directive with care:
Create a Sass template called
example.scss
. Write down the following SCSS code into this file:.example { color: $base-color; &:hover { color: lighten($base-color,20%); } } .parent .example { width: 500px; } .test { @extend...