Зачем склеивать названия классов через амперсанд

Склеивание классов через амперсанд (&) используется в препроцессорах CSS (например, SASS/SCSS) для упрощения вложенности и создания более читаемого кода. Это позволяет избежать повторения родительского селектора и делает стили модульными.

Пример:

.button {
  color: blue;
  
  &:hover {
    color: red;
  }
  
  &--disabled {
    opacity: 0.5;
  }
}

Скомпилируется в:

.button { color: blue; }
.button:hover { color: red; }
.button--disabled { opacity: 0.5; }

Преимущества:

• Уменьшает дублирование кода
• Улучшает читаемость
• Позволяет использовать БЭМ-нотацию без ручного прописывания полных имен классов