相关疑难解决方法(0)

我有一些像这样的 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 连接...？

我想<a>在 class 中嵌套标签的选择器.class-name，以便仅将这些样式应用于同时具有<a>标签和.class-name使用 SCSS的类的元素。我想做的事情可以通过以下方式执行：

.class-name {
  font-size: 40px;
 }
 
 a.class-name {
   color: #ff6666;
 }

<div class="class-name">Hello</div>
<a class="class-name" href="#">World!</a>

我使用&父选择器在 SCSS 中尝试了两种不同的方法

# successfully transpiled but no change
.class-name {
  font-size: 40px;
  &a {
    color: #ff6666;
  }
}

# Got an error trying to transpile
.class-name {
  font-size: 40px;
  a& {
    color: #ff6666;
  }
}

我不希望巢周围（另一路.class-name内a）。

我觉得我在这里遗漏了一些非常明显的东西，我可以为其编写 CSS，但我想知道是否有一种方法可以使用嵌套 SCSS 来做到这一点。如果您在某个类上设置了样式，并且该类位于不同的元素上，是否可以调整样式。例如一个h2然后是一个h3。我知道你可以通过额外的课程来做到这一点，比如......

.title-class {
    background-size: 30px;
    font-size: 30px;

    &.another-class {
        background-size: 20px;
        font-size: 20px;
    }
}

这将呈现为.title-class.another-class {}

我所追求的是基类.title-class {}和嵌套样式h3.title-class {}- 这可能吗？

我认为类似以下内容（理论上）显然行不通！我尝试使用@root，但我对此的理解很少，所以我无法让它工作。

.title-class {
    background-size: 30px;
    font-size: 30px;

    &h3 {
        background-size: 20px;
        font-size: 20px;
    }
}

提前致谢！