SASS-嵌套父选择器连接？

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

.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'really awesome

&

获取父选择器来获得它。所以我一直在尝试这样的方法（SASS语法优先）：

SCSS语法：

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

唯一的问题是，这不起作用。我试着在

&

之后弄乱文本。。。类似于

&

，

&{-et-cetera}

，

&+“-et-cetera”

。。。你明白了

---

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

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

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

这是较少的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

---

我认为只使用两个不同的类更容易、更灵活、更经得起未来考验。

太棒了！应该工作得很好，除非LiveReload的SASS已经过时，无法识别占位符。。。但只要做一个简单的调整，它就成功了。我只需将

%class

和

%etc

替换为

.class

和

.etc

。非常感谢。是的，为了子孙后代着想，你提到使用多个类和最佳实践是件好事——我只是碰巧做了一些非常奇怪和实验性的事情，并且不得不遵守我用来呈现css可变矢量艺术的自定义图标字体生成的类P

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

%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