Sass and Compass for Designers

What nesting is and how it facilitates modules of code

In Chapter 1, Getting started with Sass and Compass, we looked briefly at nesting. It provides the ability to nest styles within one another. This provides a handy way to write mini blocks of modular code.

Nesting syntax

With a normal CSS style declaration, there is a selector, then an opening curly brace, and then any number of property and value pairs, followed by a closing curly brace. For example:

.css {
  display: block;
}

Where Sass differs is that before the closing curly brace, you can nest another rule within. What do I mean by that? Consider this example:

a {
  color: $color7;
  &:hover,&:focus {
    color: $color5;
  }
  &:visited,&:active {
    color: $color4;
  }
}

In the previous code, a color has been ...