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;
  }
}

此处工作的Codepen：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>

Sass嵌套选择器，使用与号和不同标签

1 个答案: