SCSS: Как использовать два класса вместе с амперсандом?

Question

У меня есть некоторые правила CSS, которые нужно применить к основной кнопке, я сделал что-то вроде этого:

.my-btn {
  &--primary {
     padding: 10px;
  }
}

Теперь я хочу применить те же правила к основной кнопке с классом "sm", я могусделать что-то вроде этого:

.my-btn {
  &--primary, &--primary.my-btn--sm  {
    padding: 10px;
  }
}

Это работает для меня.Но я также хочу использовать «&» для «sm», например:

.my-btn {
  &--primary, &--primary.&--sm  {
    padding: 10px;
  }
}

Возможно ли это?

Answer 1

В этом случае решением может быть использование переменной:

.my-btn {
  $this: &;
  &--primary, &--primary#{$this}--sm  {
    padding: 10px;
  }
}

или использование синтаксиса интерполяции

.my-btn {
  &--primary, &--primary#{&}--sm  {
    padding: 10px;
  }
}