Beginning css preprocessors

Listing 1-6.  Supporting a New Color Format in All Browsers Using CSS

.container {

  background-color: #000;

  background-color: rgba(0,0,0, 0.9);

}

With preprocessors, this job can be done easily. If the same task were to be completed using the Sass 

precompiler, it would be done as shown in Listing 

1-7

.

Listing 1-7.  Sass Version of Listing 

1-6

$black:#000;

.container {

        background-color: $black;

        background-color: rgba($black, 0.9);

}

The preprocessor does all the calculations related to RGBA values for you.

With arrival of CSS3 support in modern browsers, people are not using images as much and are going 

with pure CSS. However, each browser has its own implementation of these features, and therefore these 

require vendor prefixes and different syntaxes. You can see a simple example of this in Listing 

1-8

.