模拟嵌套选择器而不嵌套它们以与简单选择器结合

Question

说我有这个：

$my-font-size:14px;

p{
    font-size:$my-font-size;
}
div.section{
    &.type-1,&.type-2{
        h1{
            font-size:$my-font-size;
        }
    }
}

现在说我想把它组合成一行。所以我写道：

p,div.section.type-1 h1, div.section.type-2 h1{$font-size:$my-font-size;}

但是说我仍然希望从我不必重复“父母”div的功能中受益。有没有办法做到这一点？例如：

p,div.section((&.type-1,&.type-2)) h1{$font-size:$my-font-size;}

所以基本上我正在寻找某种简写语法，以便我可以将它与另一个选择器结合起来。

div.section{
    &.type-1,&.type-2{
        h1{

Answer 1

Sass 3.3或更高版本

您正在寻找的功能称为selector-append。但是，在您的情况下，您还需要将其与selector-nest组合用于h1。

p, #{selector-nest(selector-append('div.section', ('.type-1', '.type-2')), h1)} {font-size:$my-font-size;}

Sass 3.2或更早

对于较旧的Sass版本，您可以使用Compass附带的append-selector函数，但两个参数都必须是字符串。如上所述，您需要将其与h1的nest函数结合使用。

p, #{nest(append-selector('div.section', '.type-1, .type-2'), h1)} {font-size:$my-font-size;}