Sass 101 - A newb's guide: Parent selector reference (pseudo classes)

parent_selector_reference.md

It is useful to use a nested rule’s parent selector in other ways than the default. For instance, you might want to have special styles for when that selector is hovered over. In these cases, you can explicitly specify where the parent selector should be inserted using the & character.

This technique will work for any pseudo class such as :after, :before, :active, and so on.

SCSS

a {
  color: red;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

Sass

a
  color: red
  text-decoration: none
  &:hover
    text-decoration: underline

SassMeister Gist

parent_selector_reference.scss

a {
  color: red;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}