检查类选择器中的元素类型

Question

在Sass中，我们都习惯这样做：

button {
  @extend %button;

  &.previous,
  &.next {
    background: blue;
  }
}

今天，我需要完全相反的方法：检查类选择器中的元素类型。这是我的第一次尝试，我期望它能够发挥作用：

.previous,
.next {
  @extend %button;

  &span {
    opacity: .3;
  }
}

不幸的是，这会输出.previousspan和.nextspan等选择器。我试图使用span&或插值，因为我高度认为它可以解决我的问题，但我被卡住了。

有什么想法吗？

  

注意：我显然可以把这个span选择器放在外面（这就是我为了让它工作而做的事情），但这不是我的问题。我正在寻找正确的方式来做到这一点，谢谢。

Answer 1

使用最新版本的Sass，您可以像这样实现它：

.class {
  @at-root {
    div#{&} {
      opacity: .3;
    }
  }
}

@ at-root，将确保使选择器的“范围”无效，同时仍然允许您访问＆号变量。

然而，根本不更好地定位标签名称通常是个好主意。从语言上说。