Каковы недостатки использования амперсанда (&) в препроцессорах?

• Ухудшение читаемости при глубокой вложенности.
• Сложность понимания и отладки кода с множеством контекстов внутри селекторов.
• Потенциальные конфликты при рефакторинге, если неясно, к какому родительскому селектору относится амперсанд.
• & может привести к избыточному количеству стилей для элемента, делая CSS менее эффективным.

Пример:

.parent {
  // ...
  .child {
    // ...
    &--modifier { // Контекст .parent .child--modifier
      // ...
      &-nested { // Контекст .parent .child--modifier-nested - становится менее наглядно
        color: red;
      }
    }
  }
}

В другом примере можно увидеть, как & может скрыть реальный селектор:

.btn {
  // ...
  &-primary { // Соответствует .btn-primary
    background-color: blue;
  }
}

При рефакторинге, если переименовать .btn, нужно помнить об изменении -primary. Использование отдельного класса .btn-primary может быть более явным и устойчивым к изменениям.