What are the disadvantages of using the ampersand (&) in preprocessors?

• Deterioration of readability with deep nesting.
• Complexity of understanding and debugging code with multiple contexts inside selectors.
• Potential conflicts during refactoring if it is unclear which parent selector the ampersand refers to.
• & can lead to an excessive number of styles for an element, making CSS less efficient.

Example:

.parent {
  // ...
  .child {
    // ...
    &--modifier { // Context: .parent .child--modifier
      // ...
      &-nested { // Context: .parent .child--modifier-nested - becomes less clear
        color: red;
      }
    }
  }
}

In another example, you can see how & can hide the actual selector:

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

During refactoring, if you rename .btn, you need to remember to change -primary. Using a separate class .btn-primary can be more explicit and resilient to changes.