Sass：使用相同的块名称在修饰符中嵌套元素的正确方法是什么？

Question

HTML（我无法改变）看起来像：

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

我需要定位此内容 - 特定于红色内部cta。

我可以这样做：

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

但是有更简洁的方式来写这个吗？ （注意：我的公司坚持在换行符上使用每个元素和修饰符）

我似乎记得像：

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

但不太清楚它叫什么。

所需的CSS输出为：.cta--red .cta-inner {}

Answer 1

您可以缓存父选择器：

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

Answer 2

你试过吗？

.cta {
  &--red {

  }
  &__inner {

  }
}