Beginning css preprocessors

Listing 3-54.  Example of a User-Defined Function

@function generateGrid($columns) {

  @return percentage(1/$columns);

}

.two-column{

  width:generateGrid(2);

}

Output of this code is shown in Listing 

3-55

.

Listing 3-55.  Output of Listing 

3-54

.two-column {

  width: 50%;

}

---

Chapter 3 

■

 advanCed SaSS

55

Output Style

By default, Sass outputs CSS in a nice structured format. But at the same time, it also provides options 

of various styles. Sass allows you to choose from four output styles that you can specify in the --style 

command-line parameter.

nested

This is the default style of Sass. It shows the CSS styles in normal format. Indentation is per the nesting in the 

original Sass document, as shown in Listing 

3-56

.