Sass Parent Selector

Watch "Referencing parent selectors with &" on LinkedIn Learning

The parent selector (&) is a special selector found in Sass and is used to refer to the outer selector when nesting. The parent selector makes it possible to neatly add and complex selectors in an easy to read fashion.

The parent selector can be used in conjunction with pseudo-classes. For example, it could be used to style navbar links.

$yellow: #FFBA00;
$border-color: #D14348;

.link {
  color: black;
  border-right: 1px solid $border-color;

  &:hover, &.active {
    background-color: $yellow;
    font-weight: bold;
  }

  &:last-of-type {
    border-right: 0;
  }
}

Which would produce the following CSS.

.link {
  color: black;
  border-right: 1px solid #D14348;
}
.link:hover, .link.active {
  background-color: #FFBA00;
  font-weight: bold;
}
.link:last-of-type {
  border-right: 0;
}

The parent selector can also be used to when create structured class names like ones used methodologies like BEM.

$light-grey: #f4f4f4;

.form {
  max-width: 600px;
  margin: 1rem;
  width: 90%;
  background-color: $light-grey;

  &__input {
    padding: 15px;
  }
}