Beginning css preprocessors

Listing 3-30.  Example of a Mixin

@mixin roundedEdges($radius:5px) {

  -webkit-border-radius: $radius;

     -moz-border-radius: $radius;

      -ms-border-radius: $radius;

          border-radius: $radius;

}

.container {@include roundedEdges(10px);}

---

Chapter 3 

■

 advanCed SaSS

47

This example shows a mixin that generates code for rounded edges, which accepts a single parameter 

whose default value is set to 5px if it’s not provided.

Listing 3-31.  Output of Listing 

3-30

.container {

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -ms-border-radius: 10px;

  border-radius: 10px;

}

This example shows how the mixins are defined and included. The mixins are defined using @mixin. 

They are included using @include. In this example, we have also provided an argument with its default value.

You can also create compounded mixins, by including other mixins, as shown in Listing 

3-32

.