Для чего нужно написание CSS класса через амперсанд в Sass?

Амперсанд `&` в Sass (и теперь в нативном CSS) ссылается на родительский селектор. Он нужен, чтобы писать состояния, модификаторы и элементы рядом с основным правилом.

Примеры

.button {
  color: white;

  &:hover { color: yellow; }          // .button:hover
  &.is-active { font-weight: bold; }  // .button.is-active
  &--primary { background: blue; }    // .button--primary (БЭМ)
  &__icon { margin-right: 4px; }      // .button__icon
  .dark & { color: black; }           // .dark .button
}

Что даёт

• Связанные правила лежат в одном месте.
• Удобно писать БЭМ: &__element, &--modifier.

Осторожно

• Глубокая вложенность раздувает специфичность и усложняет поиск селектора по коду — обычно ограничиваются 2–3 уровнями.
• Склейка &--primary работает в Sass, но не в нативной вложенности CSS.

Коротко для собеседования

& подставляет родительский селектор: для псевдоклассов, модификаторов и БЭМ-элементов рядом с основным правилом.

Подробнее: Sass — Parent Selector