缩短使用带有SASS的逗号分隔的CSS选择器

Question

我在样式表中有这个CSS规则：

#breadcrumbs, #breadcrumbs span {
    font-size: 0.750rem;
}

我想知道是否可以避免使用SASS重复#breadcrumbs。实现这一目标的方法之一是：

#breadcrumbs {
    font-size: 0.750rem;
    span {
        font-size: 0.750rem;
    }
}

然而，这更糟糕，因为我必须重复font-size: 0.750rem。

使用SASS从上面实际缩短 CSS的方法是什么？

Answer 1

使用＆号&：

，一个可能的选项可能是referencing the parent

#breadcrumbs {
    &, & span {
        font-size: 0.750rem;
    }
}

Answer 2

SASS应该是

#breadcrumbs 
    &, & span 
        font-size: 0.750rem

Answer 3

解决方案是：

'date'

请注意，重复父选择器#breadcrumbs { &, span { font-size: 0.750rem; } } 是不必要的，仅相当于&, & span，因为嵌套已经提供了父上下文。逗号分隔子选择器，因此SCSS实际上等效于此：

&, span

请注意，当您想将样式应用于当前选择器#breadcrumbs { & { font-size: 0.750rem; } span { font-size: 0.750rem; } } 和其他非嵌套选择器时，情况恰恰相反。然后，您将需要&指令。 （并不是说这是一种特别好的做法，也许mixins可能对此更好。）示例：

@at-root