SCSS, как @extend Nested ampersand "префикс"?

Question

Вложенный префикс амперсанда не расширяется с помощью @extend

.firstClass{
  color: green;
    &-a{
      color: red;
    }
}
.secondClass{
    @extend .firstClass;
}

Ожидаемый вывод будет

.firstClass, .secondClass{
    color: green;
}
.firstClass-a, .secondClass-a{
    color: red;
}

Но фактический вывод не имеет .secondClass-a вообще.

.firstClass, .secondClass{
    color: green;
}
.firstClass-a{
    color: red;
}

Я обнаружил, что это предполагаемое поведение для использования @extend https://github.com/sass/sass/issues/2154

Но есть ли обходной путь, который может расширить вложенный префикс амперсанда?

Answer 1

Возможно версии, над которыми я работал, были старше, но я не верю, что это было возможно.Вы можете изменить свои свойства на миксин так:

@mixin classStyle {
  color: green;

  &-a{
    color: red;
  }
}

.firstClass {
  @include classStyle;
}

.secondClass {
  @include classStyle;
}