Sass&&and向类添加标记-SassAmpersandtoaddTagtoClass

3  

You can achieve this in native sass, it's just a bit convoluted. You need to use selector-append to add the span to all of the selectors, and @at-root to do so at root level (if that makes sense? it's hard to even explain). Basically it looks like this:

您可以在本地sass中实现这一点，只是有点复杂。您需要使用selecter -append将span添加到所有选择器中，并在根级别上使用@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;
  }
}

Which should output this result:

哪个应该输出这个结果:

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

Here's a Codepen example (you'll have to view source and look for the style block in the header to see the output, I'm not sure how else to demonstrate it but hopefully this helps!)

这里有一个代码页示例(您必须查看源代码并在标题中查找样式块以查看输出，我不确定还有什么其他方法来演示它，但希望这能有所帮助!)

1  

Ladies and gentlemen...

女士们,先生们…

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

getting me, what I want:

得到我想要的:

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

Thanks to @ovokuro for pointing me into the – right – direction!

感谢@ovokuro为我指出正确的方向!