Чаро истифодаи амперсанд (&) дар пешбароҳо камбудиҳо дорад?

• Даромадани хондан дар зери ҳуҷраҳои амиқ.
• Суръатнокии фаҳмидан ва ислоҳи хатогиҳо дар код бо бисёр контекстҳо дар дохили селекторҳо.
• Мушкилоти эҳтимолӣ дар вақти рефакторинг, агар маълум набошад, ки ба кадом селектори падарӣ марбут аст амперсанд.
• & метавонад ба миқдори зиёди услубҳо барои унсур оварда расонад, ки 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 метавонад равшантар ва муқовимат ба тағирот бошад.