Beginning css preprocessors

Listing 3-19.  Example of @extend Selectors

%notification {

          border-radius: 5px;

          padding: 5px;

}

.errorLooks{

  @extend %notification;

}

Listing 3-20.  Output of Listing 

3-19

.errorLooks {

  border-radius: 5px;

  padding: 5px;

}

As you see in Listing 

3-20

, the notification extend class has not been rendered in the final output.

Do More with @extend

Classes are not the only things that can be extended. It is also possible to extend complex elements like 

a:hover, .notification, and .error, as shown in Listing 

3-21

.

Listing 3-21.  Example Demonstrating Extending a Complex Element

a{

  color:#F00;

  &:hover{

    font-weight:bold;

  }

}

.notification{

        @extend a:hover ;

}

It is also possible to create multiple rules by extending multiple CSS classes in one selector, as shown in 

Listing 

3-22

.