With Sass nesting, we can actually "nest" the navigation link selector inside the nav element's own style declarations:

a {
  font-size: 14px;
  text-decoration: underline;
  color: $text-color;
}

nav {
  background-color: $text-color;

  a {
    color: $background-color;
  }
}

This results in a link element that has a different color than other links, but still inherits other properties, such font-size and underline. This works because Sass essentially compiles to three different CSS selectors for us.

a {
 font-size: 14px;
 text-decoration: underline;
 color: #585858; 
}

nav {
 background-color: #585858; 
}

nav a {
 color: #E8E8E8; 
}

We can also use nesting for other things than just selector specificity; we can use it as a convenient way to qualify related selectors. For example, if we wanted to add a hover state to our links, we could use Sass's & parent selector to add a hover psuedo-selector to our links:

a {
  font-size: 14px;
  text-decoration: underline;
  color: $text-color;

  &:hover {
    color: $color-black;
  }
}

nav {
  background-color: $text-color;

  a {
    color: $background-color;

    &:hover {
      color: $background-color;
      opacity: 0.5;
    }
  }
}

The & selector in Sass is always equivalent to the current selector scope. This makes it easy to use nesting to encapsulate modifiers or variants of a given style into a related space, instead of breaking it out into a separate selector.