I have already copy & past some SCSS into my projects, but I didn't fully understand the importance of it. After seeing this handy @extend in action, I am going to try to understand the SCSS codes.
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:
Hi @dailydevtips1!
You made it looks easy to do 😅🤣!
I have already copy & past some SCSS into my projects, but I didn't fully understand the importance of it. After seeing this handy @extend in action, I am going to try to understand the SCSS codes.
Keep going!
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 🙌
Awesome keep it up Renan