Scss specific style for multiple classes using "&"-CodePudding

I've got this Scss:

.top {
    background-color: red;

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

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

Which compiles correctly to this:

.top {
    background-color: red;
}
.top--checked {
    background-color: yellow;
}
.top--completed {
    background-color: green;
}

This is probably simple, but I'm trying to add an additional style for elements using both "top--checked" and "top--completed", but nested within top.

Something like this (in CSS):

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

I'm just not sure on how to achieve this, as chaining ampersands doesn't seem to produce the desired effect.

CodePudding user response：

I think the best you can do would be something like this:

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