Для чего нужно написание CSS класса через амперсанд в Saas

В Sass символ & (амперсанд) используется для вложенности и ссылки на родительский селектор. Это позволяет писать более компактный и читаемый код, избегая повторений.

Пример:

.button {
  background: blue;
  
  &:hover {
    background: darkblue;
  }
  
  &--large {
    font-size: 20px;
  }
}

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

.button { background: blue; }
.button:hover { background: darkblue; }
.button--large { font-size: 20px; }

Основные преимущества:

• Создание модификаторов (BEM-нотация)
• Вложенные псевдоклассы и псевдоэлементы
• Упрощение поддержки кода
• Избегание дублирования селекторов