css - Sass Ampersand 为类添加标签

Question

我有一些像这样的 Sass:

.zbounce1, .zbounce2, .zbounce3, .zbounce4
    animation-name: bounceIn
    animation-duration: .5s
    animation-timing-function: ease-in-out

span.zbounce1, span.zbounce2, span.zbounce3, span.zbounce4
    display: inline-block

我想将第二部分简化为第一部分的嵌套位，这样我就不必再次提及每个类:

    span.&
        display: inline-block

遗憾的是，这是不合法的。 (反过来，用嵌套的 &.anotherClass 专门化一堆样式很容易......

有什么解决方法可以实现这一点？ (可能与 @extendOnly-Placeholder? )或一些时髦的 sass 连接...？

Answer 1

你可以在原生sass中实现，只是有点复杂。您需要使用 selector-append 将跨度添加到所有选择器，并使用 @at-root 在根级别执行此操作(如果这有意义？甚至很难解释)。基本上它看起来像这样:

.zbounce1, .zbounce2, .zbounce3, .zbounce4 {
  animation-name: bounceIn;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  @at-root #{selector-append(span, &)} {
    display: inline-block;
  }
}

应该输出这个结果:

.zbounce1, .zbounce2, .zbounce3, .zbounce4 {
  animation-name: bounceIn;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
}
span.zbounce1, span.zbounce2, span.zbounce3, span.zbounce4 {
  display: inline-block;
}

这是一个 Codepen example (您必须查看源代码并在标题中查找样式 block 才能看到输出，我不确定如何演示它，但希望这会有所帮助!)