Препроцессорларда амперсанд (&) қолданудың кемшіліктері қандай?

• Терең ендірілген кезде оқылудың нашарлауы.
• Таңдағыштар ішіндегі бірнеше контексттері бар кодты түсіну және оны қадағалау қиындықтары.
• Егер амперсанд қай ата-аналық таңдауышқа тиесілі екені анық болмаса, қайта құру кезінде ықтимал қайшылықтар.
• & элемент үшін стильдердің артық мөлшеріне әкелуі мүмкін, бұл CSS-ті тиімділігін төмендетеді.

Мысал:

.parent {
  // ...
  .child {
    // ...
    &--modifier { // Контексті .parent .child--modifier
      // ...
      &-nested { // Контексті .parent .child--modifier-nested - көрнекілігі төмендейді
        түсі: қызыл;
      }
    }
  }
}

Басқа мысалда & нақты таңдауышты қалай жасыруға болатынын көруге болады:

.btn {
  // ...
  &-primary { // .btn-primary-ге сәйкес келеді
    фонын түсі: көк;
  }
}

Қайта құру кезінде, егер .btn өзгертілсе, -primary өзгерісін ескеру керек. Жеке .btn-primary класын қолдану анық әрі өзгерістерге төзімді болуы мүмкін.