SASS嵌套父选择器串联？

Question

好的，这是我想要得到的输出：

.class-1, .class-2, .class-3 {
    z-index: 1;
}

.class-1-et-cetera, .class-2-et-cetera, .class-3-et-cetera {
    z-index: 5;
}

我想通过嵌套一个选择器并使用SASS非常棒的&来获取父选择器来获得它。所以我一直在尝试这样的方法(SASS语法优先)：

.class-1, .class-2, .class-3
    z-index: 1
    &-et-cetera
        z-index: 5

SCSS语法：

.class-1, .class-2, .class-3 {
    z-index: 1;
    &-et-cetera {
        z-index: 5;
    }
}

唯一的问题是，这是行不通的。我试着在&之后处理文本...像&#{"-et-cetera"}，&#{-et-cetera}，& + "-et-cetera"这样的东西...你明白了吧。

我想这是可能的，但似乎找不到。有什么办法可以做到吗？

Answer 1

考虑利用元素可以有多个类这一事实。

<div class="class-1 et-cetera"></div>
<div class="class-1"></div>
<div class="class-2 et-cetera"></div>
<div class="class-3"></div>
...

.class-1, .class-2, .class-3
  z-index: 1

.et-cetera 
  z-index: 5

这是较少的CSS，使用Sass或其他。

如果你需要额外的特异性，你可以像这样嵌套它：

.class-1, .class-2, .class-3
  z-index: 1
  &.et-cetera 
    z-index: 5

这将为您提供：

.class-1, .class-2, .class-3 {
    z-index: 1;
}
.class-1.et-cetera, .class-2.et-cetera, .class-3.et-cetera {
    z-index: 5;
}

编辑

如果你真的想用Sass做到这一点，你可以这样做，我不推荐这样做：

%class
  z-index: 1

%etc
  z-index: 5

@each $i in class-1, class-2, class-3
  .#{$i}
    @extend %class
  .#{$i}-et-cetera
    @extend %etc

我认为只使用两个不同的类要容易得多，灵活得多，而且面向未来。