Jump Start Sass

Chapter 6Nesting

If we had to name three features that make Sass a popular stylesheet authoring tool, it would likely be variables, mixins, and nesting. As we will see in this chapter, nesting appears in several forms when it comes to Sass but by far the most popular one is selector nesting. Let’s start with this.

Selector Nesting

Selector nesting, or “nested rules” as described in the official documentation, is the ability to write rule sets within other rule sets that result in composed selectors. This is one of those concepts that are hard to describe but surprisingly easy to understand with an example.

Consider two rule sets like so:

.container {
  margin: 0 auto;
  max-width: 42em;
  padding: 0 1em;
}

.container p {
  text-indent: 1em;
}

This is ...