如何在SCSS的.top嵌套结构中编写多类复合选择器样式？

现有如下SCSS代码：

.top {
    background-color: red;

    &--checked {
        background-color: yellow;
    }

    &--completed {
        background-color: green;
    }
}

该代码可正确编译为对应的CSS规则。现在需要在.top的嵌套规则中，添加针对同时拥有.top--checked和.top--completed类的元素的样式，预期生成如下CSS规则：

.top--checked.top--completed {
    background-color: blue;
}

尝试链式使用&符号未得到预期效果，求实现方法。

在.top的嵌套块中直接添加如下代码即可：

&--checked&--completed {
    background-color: blue;
}

完整的SCSS代码如下：

.top {
    background-color: red;

    &--checked {
        background-color: yellow;
    }

    &--completed {
        background-color: green;
    }

    &--checked&--completed {
        background-color: blue;
    }
}

原理说明 #

&在SCSS中代表当前父选择器的完整内容（这里就是.top），所以：

• &--checked会被编译为.top--checked
• &--completed会被编译为.top--completed
• 将二者直接连写（&--checked&--completed），就会生成两个类选择器的交集选择器.top--checked.top--completed，正好匹配同时拥有这两个类的元素。

内容的提问来源于stack exchange，提问作者Seb Heron