Sass Tricks

Using & with suffixed selectors

The & idiom simply concatenates the parent selector with whatever follows so the ampersand. This allows you to easily style classes like .error, .error--serious, error--not-serious like so:

Sass input

.error {
  color: red;
  &--serious {
    font-weight: 800;
  }
  &--not-serious {
    font-weight: 100;
  }
}

CSS output

.error {
  color: red;
}

.error--serious {
  font-weight: 800;
}

.error--not-serious {
  font-weight: 100;
}

Credit Bill C.