Beginning css preprocessors

Listing 1-19.  Example of a Border-Radius Mixin with a Parameter and its Default Value in Sass

@mixin rounded-corners($radius:5px) {

  -webkit-border-radius: $radius;

     -moz-border-radius: $radius;

      -ms-border-radius: $radius;

          border-radius: $radius;

}

 

.container { @include rounded-corners(10px); }

---

Chapter 1 

■

 IntroduCtIon to preproCessors

10

Listing 1-20.  Example of a Border-Radius Mixin with a Parameter and its Default Value in Less

.rounded-corners(@radius:5px) {

  -webkit-border-radius: @radius;

     -moz-border-radius: @radius;

      -ms-border-radius: @radius;

          border-radius: @radius;

}

 

.container { .rounded-corners(10px); }

Extend/Inheritance

Preprocessors allow you to share a collection of CSS properties between one or more selectors. This helps 

you write preprocessor code as per the DRY principle. See Listings 

1-21

 and 

1-22

.

Listing 1-21.  Example for Extend in Sass

.messagebox {

        font-size:1em;

        line-height:40px;

}

 

.successBox {

        @extend .messagebox;

        color:#0F0;

}

Listing 1-22.  Example for Extend in Less

.messagebox {

        font-size:1em;

        line-height:40px;

}

 

.successBox {

        &:extend(.messagebox);

        color:#0F0;

}

Operators

Preprocessors provide standard math operators so that you can perform calculations on the fly. See  

Listing 

1-23

.

Listing 1-23.  Example Showing a Math Operation in Sass and Less

.mainContent {

  float: left;

  width: 750px / 960px * 100%;

}

---

Chapter 1 

■

 IntroduCtIon to preproCessors

11

Problems with CSS Preprocessors

This section discusses the features of preprocessors that are used inappropriately. You will see most 

common problems that occur due to misuse or overuse of preprocessor features.

Problems with Mixins

Mixins are reusable blocks of code that are called wherever you need to include them. This is instead of 

having to rewrite these blocks several times.

Consider a code snippet written in the Sass preprocessor, shown in Listing 

1-24

.

Listing 1-24.  An Example of a Mixin Using Sass

@mixin notification {

    color: #fff;

    border-radius: 50%;

}

  

.errorNotification {

    @include notification;

    background:#F00;

}

  

.successNotification {

    @include notification;

    background: #0F0;

}

This code compiles to Listing 

1-25

.

Listing 1-25.  Output of Listing 

1-24

.errorNotification {

  color: #fff;

  border-radius: 50%;

  background: #F00;

}

 

.successNotification {

  color: #fff;

  border-radius: 50%;

  background: #0F0;

}

Notice the code duplication that occurs in the output shown in Listing 

1-25

. If this mixin is used 

extensively across style code, it would result in a large amount of code redundancy and thus increase the 

file size.

Sass has an alternative approach, which is not supported by other preprocessors—extending. Extending 

the code will set the same properties of multiple selectors simultaneously, by specifying the selectors in a 

comma-separated format.

---

Chapter 1 

■

 IntroduCtIon to preproCessors

12

This approach avoids duplication; however, it can cause performance issues if too many selectors 

are extended. The resulting CSS will have many selectors in comma-separated format, which can cause 

performance issues.

Extending Selectors or Using Mixins Can Hamper Maintenance

Extending classes or using mixins can cause maintenance issues. Since the properties are declared and used 

in different places, the chances of changing a property without anticipating a complete impact are high. This 

can cause layouts to break at any point.

Summary

This chapter introduced preprocessors. You looked at how they can influence your workflow, making it more 

efficient and far easier to maintain in the future. You also looked at some known preprocessors currently 

available in the market.

The next chapter dives into Sass and discusses its various features.

---

13