Beginning css preprocessors

Listing 1-16.  Example of Nesting in Sass or Less

nav {

  ul {

    margin: 0 auto;

    padding: 10px 15px;

    list-height: 1em;

  }

}

---

Chapter 1 

■

 IntroduCtIon to preproCessors

9

The generated CSS will look like Listing 

1-17

.

Listing 1-17.  Output of Previous Code Snippet

nav ul {

  margin: 0 auto;

  padding: 10px 15px;

  list-height: 1em;

}

Import

Preprocessors have a slightly different @import implementation to the one in CSS. Instead of fetching a file 

from server, Sass will fetch the specified file and merge it into the file you’re importing. This results in a 

single CSS file being served to the web browser.

Suppose you have two SCSS files called reset.scss and style.scss and you want to import  

reset.scss into style.scss. This can be done using Sass; see Listing 

1-18

.