Beginning css preprocessors

Listing 3-56.  Example of Nested Styles

#container {

  color: #000; }

  #container p {

    padding: 10px; }

expanded

When this style is selected, the output derived is exactly as it would be if the CSS were handwritten. There 

won’t be any indentation for rules as would be with nested style of output, as shown in Listing 

3-57

.

Listing 3-57.  Example of Expanded Styles

#container {

  color: #000;

}

 

#container p {

  padding: 10px;

}

compact

Compact output consumes less space than the previous two styles. It puts all the properties on one single 

line, with one rule per line, as shown in Listing 

3-58

.

Listing 3-58.  Example of Compact Styles

#container {color: #000;}

#container p {padding: 10px;}

---

Chapter 3 

■

 advanCed SaSS

56

compressed

The compressed style takes minimum amount of space altogether. It eliminates all white space, as shown in 

Listing 

3-59

.