检查类选择器内的元素类型 [英] Check element type inside a class selector

问题描述

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

In Sass, we all use to do things like this:

button {
  @extend %button;

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

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

Today, I need the exact opposite: check the element type inside a class selector. Here's my first attempt, which I expected to work:

.previous,
.next {
  @extend %button;

  &span {
    opacity: .3;
  }
}

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

Unfortunately, this outputs selectors like .previousspan and .nextspan. I tried to use span&, or interpolation as I highly suppose it could solve my problem, but I'm stuck.

有什么想法吗?

注意:我显然可以将这个 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.

推荐答案

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

With the latest versions of Sass, you could implement it like so:

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

@at-root，将确保取消选择器的范围"，同时仍然允许您访问&符号变量.

@at-root, will make sure to nullify the "scope" of the selector, while still giving you access to the ampersand variable.

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

However it's usually a better idea to not target tag names at all. Sementically speaking.

这篇关于检查类选择器内的元素类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！