Jakie są wady używania ampersanda (&) w preprocesorach?

• Pogorszenie czytelności przy głębokim zagnieżdżeniu.
• Złożoność w zrozumieniu i debugowaniu kodu z wieloma kontekstami wewnątrz selektorów.
• Potencjalne konflikty podczas refaktoryzacji, jeśli nie jest jasne, do którego selektora nadrzędnego należy ampersand.
• & może prowadzić do nadmiaru stylów dla elementu, co czyni CSS mniej wydajnym.

Przykład:

.parent {
  // ...
  .child {
    // ...
    &--modifier { // Kontekst .parent .child--modifier
      // ...
      &-nested { // Kontekst .parent .child--modifier-nested - staje się mniej czytelne
        color: red;
      }
    }
  }
}

W innym przykładzie można zobaczyć, jak & może ukryć rzeczywisty selektor:

.btn {
  // ...
  &-primary { // Odpowiada .btn-primary
    background-color: blue;
  }
}

Podczas refaktoryzacji, jeśli zmienisz nazwę .btn, musisz pamiętać o zmianie -primary. Użycie osobnej klasy .btn-primary może być bardziej czytelne i odporne na zmiany.