Sass & 将标签添加到类 [英] Sass Ampersand to add Tag to Class

问题描述

我有一些这样的 Sass:

I have some Sass like this:

.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

我想将第二部分简单化为第一部分的嵌套部分，所以我不必再次提及每个类:

I would like to simplyfy the second part to a nested bit of the first part, so I don't have to mention every class again:

    span.&
        display: inline-block

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

Sadly, this is not legal. (The other way round, specializing a bunch of styles with a nested &.anotherClass is easy...

有什么解决方法可以实现这一目标吗?(也许使用 @extendOnly-Placeholder?)或一些时髦的 sass 串联...?

Any workaround to achieve this? (perhaps with the @extendOnly-Placeholder?) or some funky sass concatenation...?

推荐答案

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

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:

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

这是一个 Codepen 示例(您必须查看源代码并查找样式在标题中阻止以查看输出，我不知道如何演示它，但希望这会有所帮助！)

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!)

这篇关于Sass & 将标签添加到类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！