When you write
.a .b .c .d {
color: blue;
}
What you're saying is
Any element with class
d
that's nested beneath elements with classesa
,b
, andc
in that order should have blue text.
Then when you write
.e .f .g .h {
@extend .d;
}
what you're saying is
Any element with class
h
that's nested beneath elements with classese
,f
, andg
in that order should be styled as though it also has classd
.
The conjunction of these two statements implies
And element with class
h
that's nested beneath elements with classese
,f
, andg
in that order and beneath elements with classesa
,b
, andc
in that order should have blue text.
It's important to note that the two nesting requirements here don't have any particular order. Both of the following spans should have blue text:
<div class="a">
<div class="b">
<div class="c">
<div class="e">
<div class="f">
<div class="g">
<span class="h">Order 1</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="e">
<div class="f">
<div class="g">
<div class="a">
<div class="b">
<div class="c">
<span class="h">Order 1</span>
</div>
</div>
</div>
</div>
</div>
</div>
The way to represent this in CSS is
.a .b .c .d, .a .b .c .e .f .g .h, .e .f .g .a .b .c .h {
x: y; }
Note that fully satisfying those semantics would produce exponential output, so Sass elides all but the two most likely permutations for space reasons.
Even with an adequate understanding of how
@extend
works, increasing the number of selectors to cover the bases of what a user could possible mean makes it easier to bump into the <IE9 selector limit. The discovery is not so much that they misunderstood (misunderstanding being common enough that it's hopefully not painful!), but that the promise made by the feature - that the user shouldn't have to care about the CSS generated so long as Sass meets their semantic needs - is actually dangerous except in simple cases.I haven't found it hard to understand what
@extend
does - my struggle is to understand why. @nex3 has given a good explanation of the reasoning in this case, but I haven't yet been able to find a CSS author who would ask for that behavior, let alone expect it. "The semantics I want should just work at any cost, and I should never have to think about the generated CSS" doesn't seem to be a widely-held sentiment among the developers I know. :)