css - 使用 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;
        }
    }
}