缩短CSS选择器，用逗号和SASS分隔

我在样式表中有以下CSS规则：

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

我想知道是否有可能避免用SASS重复

#面包屑

。实现这一目标的方法之一是：

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

然而，这更糟糕，因为我必须重复

font-size:0.750rem

---

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

一种可能的选择是使用符号和

&

：

#面包屑{
&，&span{
字体大小：0.750rem；
}
}

SASS应该是

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

解决办法是：

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

请注意，重复父选择器

&，&span

是不必要的，它只相当于

&，span

，因为嵌套已经提供了父上下文。逗号分隔子选择器，因此SCS实际上相当于：

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

请注意，当您希望将样式应用于当前选择器

&

和其他选择器（而不是嵌套选择器）时，情况正好相反。然后需要根目录下的

@at

指令。（这并不是说这是一个特别好的实践，也许mixin在这方面会更好。）例如：

[type="text"],
[type="number"],
[type="password"],
select {
  font-size: 0.9em;

  @at-root &, [type='checkbox'] {
      margin: .5em 0;
  }
}