Beginning css preprocessors

Listing 1-13.  Example Showing Implementation of Variables Using SASS

$text-color:#333;

body {

        color:$text-color;

}

When this code is compiled, it takes the variable defined for the $text-color and outputs normal CSS 

with the variable’s values placed in the CSS. This can be useful when working with properties applicable 

sitewide and keeping them consistent throughout the site.

Listing 1-14.  Output of Previous Code Snippet

body {

        color:#333;

}

Similarly in Less CSS @ symbol is used to declare a variable.

Listing 1-15.  Example Showing Implementation of Variables Using Less

@text-color:#333;

body{

        color:$text-color;

}

Nesting

Visual hierarchy of a page is not as clear in CSS as it is in HTML. Preprocessors let you nest CSS selectors, 

similar to the way it is done in HTML.