sass - 检查类选择器内的元素类型

Question

这个问题在这里已经有了答案:





In Sass, how to reference two parent classes with ampersand to compound with an element?

(2 个回答)


5年前关闭。




在 Sass 中，我们都习惯做这样的事情:

button {
  @extend %button;

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

今天，我需要完全相反的:检查类选择器中的元素类型。这是我的第一次尝试，我希望它能工作:

.previous,
.next {
  @extend %button;

  &span {
    opacity: .3;
  }
}

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

任何的想法？

Note: I could obviously put this span selector outside (and that's what I've done to get it to work), but this is not the point of my question. I'm really searching for the right way to do it, thanks.

Answer 1

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

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

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

然而，根本不定位标签名称通常是一个更好的主意。从语义上讲。