Beginning css preprocessors

Listing 2-21.  Nesting a Group of Selectors

.article{

  p,section{

    line-height:1em;

  }

}

Listing 2-22.  Output of Listing 

2-21

.article p, .article section {

  line-height: 1em;

}

Referencing a Parent Selector: &

When nesting styles in Sass, there are many occasions where you might need to refer to the parent selector. 

For example, if you want to write a style for a hover state of an element, you can refer to the parent element 

by prefixing the & selector, as shown in Listing 

2-23

.

Listing 2-23.  Using & to Refer to the Parent Selector

a {

        text-decoration:none;

        &:hover {

                text-decoration:underline;

        }

}

When this code is compiled, & is replaced with the parent selector. The compiled output is shown in 

Listing 

2-24

.