Вложенные селекторы с использованием Sass

Question

Как я могу получить этот вывод, используя Sass?

.class.active  .class-name1 {}
.class.active  .class-name2 {}

Вот что я попробовал:

.class {
    &.avtive {
        &-name1 {

        }

        &-name2 {

        }
    }
}

Answer 1

Вам необходимо сохранить ссылку на имя внешнего класса и интерполировать его для ваших -name классов. Используя color: red в качестве примера применяемого стиля:

.class {
    $outer-class: &;
    &.active {
        #{$outer-class}-name1 {
          color: red;
        }

        #{$outer-class}-name2 {
          color: red;
        }
    }
}