Beginning css preprocessors

Listing 3-13.  An Example of Using @extend

.notification{

  border-radius:5px;

  padding:5px;

}

 

.success{

  @extend .notification;

  background-color:#0F0;

}

Listing 3-14.  Output of Listing 

3-13

.notification, .success {

  border-radius: 5px;

  padding: 5px;

}

 

---

Chapter 3 

■

 advanCed SaSS

41

.success {

  background-color: #0F0;

}

There are some disadvantages of using @extend. For one, the result of extending may sometimes be 

unpredictable in a large file where the extended CSS selector is present multiple times. This could result in 

undesirable output.

Another issue with using @extend is that it cannot be used inside @media declarations.

@extend is also not as flexible as using mixins, as it cannot accept arguments.

It is possible to create a single selector by extending multiple selectors, as shown in Listing 

3-15

.