Sass 嵌套选择器使用带有不同标签的符号

Question

在嵌套多个类选择器时，有没有办法使用 sass 根据 tag 指定样式？例如，当您有一个通用类选择器并且需要在它是 span 或 a 时对其设置不同的样式。像这样的东西(那不起作用):

.foo > .bar > .item {
    display: block;
    font-weight: 700;

    &span {
        color: blue;
    }
    &a {
        color: red;
    }
}

它适用于类，但对于标签我找不到方法。太糟糕了，有一个 css 选择器 :not() 但没有 :is()，那会起作用。

Answer 1

我不认为你能比这更接近:

.foo > .bar > {
  & .item {
    display: block;
    font-weight: 700;
  }
  & span.item {
    color: blue;
  }
  & a.item {
    color: red;
  }
}

在这里工作代码笔:https://codepen.io/MrLister/pen/gqbqzX

这是编译后的 CSS 片段。

.foo > .bar > .item {
  display: block;
  font-weight: 700;
}
.foo > .bar > span.item {
  color: blue;
}
.foo > .bar > a.item {
  color: red;
}

<main class="foo">
  <section class="bar">
    <div class="item">A div item </div>
    <span class="item"> A span item</span>
    <a class="item"> An a item</a>
  </section>
</main>