Css 将标记添加到类的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

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

我想将第二部分简化为第一部分的嵌套部分，因此我不必再次提及每个类：

    span.&
        display: inline-block

可悲的是，这是不合法的。（另一方面，用嵌套的

&.另一个类
专门化一组样式很容易

要实现这一点，有什么解决方法吗？（可能是使用）或一些时髦的sass连接…？
您可以在本机sass中实现这一点，只是有点复杂。您需要使用selector append将范围添加到所有选择器，并在根级别使用@at root来实现（如果这有意义，甚至很难解释）.基本上是这样的：

.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

.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;
}

下面是一个示例（您必须查看源代码并在标题中查找样式块才能看到输出，我不知道如何演示它，但希望这会有所帮助！）
女士们先生们

.zbounce, .zbounce1, .zbounce2, .zbounce3, .zbounce4, .zbounce5
    ...
    @at-root #{selector-append(span, &)}
        display: inline-block

得到我想要的：

span.zbounce, span.zbounce1, span.zbounce2, 
span.zbounce3, span.zbounce4, span.zbounce5 { 
    display: inline-block;
}

感谢@ovokuro为我指明了方向
– 
– 
！
我不确定这是否是SASS问题。如果所有4个类共享相同的动画，您能否创建一个新类，
zbounce
，并将其应用于所有4个元素？如果我误解了它的具体属性，请道歉。想想
背景：绿色
与
红色
。这是一个舒适的“类记忆”“…（在许多情况下可以使用
&
来表示…）我明白了。这个问题有帮助吗？@ovokuro最流行的答案中提到的那些问题可能确实有帮助。。。