This advice suggests that @extend can exhibit surprising behaviour as it will indiscriminately extend every instance of a matching selector that it finds.
In this particular case it doesn't matter as the class selector .orbit only appears once—so the compiled CSS looks like:
This advice suggests that
@extend
can exhibit surprising behaviour as it will indiscriminately extend every instance of a matching selector that it finds.In this particular case it doesn't matter as the class selector
.orbit
only appears once—so the compiled CSS looks like:To control
@extend
better a placeholder selector can be bound to instead because placeholders only ever appear in one place:Now the compiled CSS looks like this:
Notice how the placeholder selector is gone.
Alternately a
@mixin
could also be used:In the case of the
@mixin
, the declarations are copied to the@include
sites instead.Thank you for the detailed explanation 😃
@peerreynders A wild shot here, but you wouldn't be interested in a job over at daily.dev?
😱
Oh nice, learned something new about that placeholder selector!
Thanks Peer 🙌