Kokios yra ampersando (&) naudojimo trūkumai preprocesoriuose?

• Gili gylioje įdėjimo vietoje blogėja skaitomumas.
• Sudėtingumas suprasti ir derinti kodą su daugybe kontekstų selektoriuose.
• Potencialūs konfliktai refaktorizuojant, jei nėra aišku, kuriai tėvų selektoriui priklauso ampersandas.
• & gali sukelti perteklinį stilių kiekį elementui, padarydamas CSS mažiau efektyvų.

Pavyzdys:

.parent {
  // ...
  .child {
    // ...
    &--modifier { // Kontekstas .parent .child--modifier
      // ...
      &-nested { // Kontekstas .parent .child--modifier-nested - tampa mažiau aišku
        color: red;
      }
    }
  }
}

Kitas pavyzdys, kaip & gali paslėpti tikrąjį selektorių:

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

Refaktorizuojant, jei pervadinsite .btn, turite prisiminti pakeisti ir -primary. Naudojant atskirą klasę .btn-primary, tai gali būti aiškiau ir atspariau pokyčiams.