Extending a compound selector violates extend semantics

Currently, when a compound selector is extended, Sass will only replace instances of the full extendee with the extender. For example:

.a {x: y}
.b {x: y}
.a.b {x: y}

.c {@extend .a.b}

produces

.a {x: y}
.b {x: y}
.a.b, .c {x: y}

when it should produce

.a, .c {x: y}
.b, .c {x: y}
.a.b, .c {x: y}

according to the semantics of @extend. We should fix this, especially as CSS moves closer to supporting @extend natively.

Tasks:

• Deprecate existing behavior in stable.
• Remove behavior from master.

[ArmorDarks]

If an element matches .a.b, that means it also matches both .a and .b individually, so .c {@extend .a.b} should mean the same thing as .c {@extend .a; @extend .b}.

I still miss the logic why .a.b. also matches .a and .b individually. Those are 3 different selectors, it just so happens that they consist from same elements, but nothing more.

It just goes against CSS logic, since when in CSS we write more complex selectors, we increasing its specificity on purpose, to ensure that only “those instances of class” with class='a b' will receive that style, not class='a' and class='b'.

I think Sass can follow pretty much close same logic — when you increase specificity of extend, you want to extend only specific selectors, not everything related to them, otherwise you would write more generic extend.

[mdesantis]

-1 to this. If I want .c to extend .a and .b I write .c { @extend .a; @extend .b; }.