如何使用SCSS同时将CSS属性应用于特定于类和元素

Question

如下所示，有两个(div&span(HTML元素具有相同的类(内容，但仅在span上，我希望添加color属性。SCSS将如何实现？

.content {
padding-left: 30px;
span#{&} {
color: red;
}
}

<div class="content">Lorem ipsum dolor sit amet</div>
<span class="content">Lorem ipsum dolor sit amet</span>

请帮忙。

Answer 1

使用允许高级嵌套的@at-root：https://sass-lang.com/documentation/at-rules/at-root

.content {
padding-left: 30px;

@at-root span#{&} {
color: red;
}
}

编译成

.content {
padding-left: 30px;
}
span.content {
color: red;
}

Answer 2

您可以使用特殊类别:is，

.content {
padding-left: 30px;
&:is(span) {
color: red;
}
}