Beginning css preprocessors

Listing 3-22.  Example Demonstrating Extending Multiple Classes

.notification{

        Border-radius:50%;

}

.strongText{

        Font-weight:bold;

}

.error{

        @extend .notification;

        @extend .strongText;

        Color:#F00;

}

---

Chapter 3 

■

 advanCed SaSS

44

This code will give the output shown in Listing 

3-23

.

Listing 3-23.  Output of Listing 

3-22

.notification, .error {

  Border-radius: 50%;

}

 

.strongText, .error {

  Font-weight: bold;

}

 

.error {

  Color: #F00;

}

It is also possible to chain the selectors while extending; that is, extending one selector that already 

extends another selector. Here is the modified code of Listing 

3-24

 to demonstrate this phenomenon.

Listing 3-24.  Example Demonstrating Chaining extends

.notification{

        Border-radius:50%;

}

.strongText{

  @extend .notification;

        Font-weight:bold;

}

.error{

        @extend .strongText;

        Color:#F00;

}

The output of this code will be same as shown in Listing 

3-23

.

There might be situations where you want @extend to be ignored if the extended selector has as error or 

is not present. You can use the !optional flag in that case. This will prevent @extend from producing results. 

This is demonstrated in Listing 

3-25

.