Css Sass：在具有相同块名的修改器中嵌套元素的正确方法？

HTML（我无法更改）如下所示：

<div class="cta">
  <div class="cta--red">
    <div class="cta__inner">
    </div>
  </div>
</div>

但是有没有更干净的方法来写这个？（注意：我的公司坚持让每个元素和修饰符在换行符上）

我似乎想起了这样的事情：

.cta {
  &--red & {
    &__inner {
    }
  }
}

但我不太记得它叫什么

所需的CSS输出是：

.cta--red.cta internal{}

您尝试过吗

.cta {
  &--red {

  }
  &__inner {

  }
}

---

您可以缓存父选择器：

.cta {
  $this: &;

  &--red {
    // -> .cta--red

    & #{$this}__inner {
      // -> .cta--red .cta__inner
    }
  }
}

在我看来，更干净的选择是：

.cta {
  // -> .cta

  .cta--red {
    // -> .cta .cta--red

    .cta__inner {
      // -> .cta .cta--red .cta__inner
    }
  }
}

---

但这不是针对每个人吗？我需要红色的内部嵌套。例如，我需要的css输出是：

.cta--red.cta internal{

我用一个新的解决方案更新了我的答案。

.cta {
  // -> .cta

  .cta--red {
    // -> .cta .cta--red

    .cta__inner {
      // -> .cta .cta--red .cta__inner
    }
  }
}