Sass & 符号将标签添加到类中

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 来实现这一点，只是有点复杂。您需要使用选择器附加将跨度添加到所有选择器，并使用 @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 示例（您必须查看源代码并在标题中查找样式块才能查看输出，我不确定如何演示它，但希望这会有所帮助！）