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

假设我有这个：

$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{

Sass 3.3或更高版本 您要查找的函数称为

选择器追加

。但是，在您的情况下，您还需要将它与h1的选择器嵌套结合起来

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

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

Sass 3.2或更高版本 对于较早的Sass版本，可以使用Compass附带的

附加选择器

函数，但两个参数都必须是字符串。如上所述，您需要将其与h1的

nest

函数结合使用

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

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

---

被称为

selector append

或

append selector

，后面在代码中使用。@Tushar修复了输入错误，我很感谢您的回答。如果这是最好的解决办法，我会接受的。如果可能的话，我正在寻找更深入人心的语言。使用字符串和函数对于应该内置的东西来说变得非常混乱。选择器附加和选择器嵌套函数内置在语言中。这是在不使用嵌套的情况下完成所需操作的唯一方法。使用CSS，我被迫编写：

p，div.section.type-1 h1，div.section.type-2 h1

。对于Sass，我有两个选择：嵌套，我想避免它，因为它剥夺了我用逗号对选择器进行分组的能力（对我来说，这意味着它们出于相同的原因具有相同的样式——我希望保留代码的样式），或者使用

append selector

函数，使其看起来像脚本而不是选择器。我希望有一种更简洁地编写选择器的方法。例如：

p，div.section[.type1，.type2]h1

。

[]

之间的内容将是“或”——