DEV Community

Discussion on: CSS Logos: React logo

Collapse
peerreynders profile image
peerreynders

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:

.orbit, .react:before, .react:after, .react {
  height: 6.25rem;
  width: 20rem;
  border-radius: 50%;
  border: 0.625rem solid #61DAFB;
}
Enter fullscreen mode Exit fullscreen mode

To control @extend better a placeholder selector can be bound to instead because placeholders only ever appear in one place:

%orbit {
  height: 6.25rem;
  width: 20rem;
  border-radius: 50%;
  border: 0.625rem solid #61DAFB;
}

.react {
  @extend %orbit;
  background: radial-gradient(circle, #61DAFB 15%, transparent 15%);
  position: relative;
  animation: rotate 15s infinite linear;
  &:before,
  &:after {
    content: "";
    @extend %orbit;
    position: absolute;
    left: -0.625rem;
    top: -0.625rem;
  }
  &:before {
    transform: rotate(60deg)
  }
  &:after {
    transform: rotate(120deg)
  }
}
Enter fullscreen mode Exit fullscreen mode

Now the compiled CSS looks like this:

.react:before, .react:after, .react {
  height: 6.25rem;
  width: 20rem;
  border-radius: 50%;
  border: 0.625rem solid #61DAFB;
}
Enter fullscreen mode Exit fullscreen mode

Notice how the placeholder selector is gone.

Alternately a @mixin could also be used:

@mixin orbit() {
  height: 6.25rem;
  width: 20rem;
  border-radius: 50%;
  border: 0.625rem solid #61DAFB;
}

.react {
  @include orbit();
  background: radial-gradient(circle, #61DAFB 15%, transparent 15%);
  position: relative;
  animation: rotate 15s infinite linear;
  &:before,
  &:after {
    content: "";
    @include orbit();
    position: absolute;
    left: -0.625rem;
    top: -0.625rem;
  }
  &:before {
    transform: rotate(60deg)
  }
  &:after {
    transform: rotate(120deg)
  }
}
Enter fullscreen mode Exit fullscreen mode

In the case of the @mixin, the declarations are copied to the @include sites instead.

Collapse
renanfranca profile image
Renan Franca

Thank you for the detailed explanation 😃

Collapse
dailydevtips1 profile image
Chris Bongers Author

@peerreynders A wild shot here, but you wouldn't be interested in a job over at daily.dev?

Thread Thread
renanfranca profile image
Renan Franca

😱

Collapse
dailydevtips1 profile image
Chris Bongers Author

Oh nice, learned something new about that placeholder selector!
Thanks Peer 🙌