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将span添加到所有选择器中，并且@ at-root在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;
}

此处＆＃39; sa Codepen example（您必须查看源代码并在标题中查找样式块以查看输出，我不确定如何演示它但是希望这有帮助！）

Answer 2

女士们，先生们......

.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指点我 the - right - direction！

Sass Ampersand将标签添加到班级

2 个答案: