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

【问题标题】：Sass nested selector using ampersand with different tags使用带有不同标签的 & 符号的 Sass 嵌套选择器
【发布时间】：2019-06-17 01:35:16
【问题描述】：

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

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

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

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

【问题讨论】：

这里是解决方案：stackoverflow.com/questions/17268051/…

标签： sass css-selectors

【解决方案1】：

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

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

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

这是一个带有已编译 CSS 的 sn-p。

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

【讨论】：