使用 Sass 的嵌套選擇器

Question

我怎樣才能使用 Sass 獲得這個 output？

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

這是我嘗試過的：

.class {
    &.avtive {
        &-name1 {

        }

        &-name2 {

        }
    }
}

Answer 1

您需要保留對外部 class 名稱的引用，並將其插入到您的-name類中。 使用color: red作為要應用的樣式的示例：

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

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