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-syntax first):

.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

使用Sass或其他方法减少CSS.

如果您需要额外的特异性,您可以像这样嵌套它:

.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

我认为只使用两个不同的类就更容易,更灵活,更具前瞻性.