Beginning css preprocessors

Listing 1-8.  Implementation of CSS Features for Different Browsers

.container {

        -webkit-border-radius: 10px;

        -moz-border-radius: 10px;

        -ms-border-radius: 10px;

        -o-border-radius: 10px;

        border-radius: 10px;

}

Preprocessors make this job easier by allowing you to declare this code in a reusable component called 

a mixin (covered in coming chapters) and then use it directly in your code. 

---

Chapter 1 

■

 IntroduCtIon to preproCessors

5

This example assumes that this reusable mixin is named rounded-corners. The code for this in the Sass 

preprocessor would look like Listing 

1-9

.