DEV Community

CSS Logos: React logo

Chris Bongers on March 26, 2022

I'm sure you have seen the React (atom-like) logo before, but as a reminder, this is what it looks like: Analysing the logo The logo ...

Read full post

Renan Franca • Mar 26 '22

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!

peerreynders • Mar 27 '22

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;
}

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)
  }
}

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;
}

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)
  }
}

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

Chris Bongers • Mar 27 '22

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

Renan Franca • Mar 27 '22

Thank you for the detailed explanation 😃

Chris Bongers • Mar 27 '22

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

Renan Franca • Mar 27 '22

😱

Shivam Sharma • Mar 26 '22

You should create CSS logo series in dev.to and add posts in it so that your audience can get all at one place.

Chris Bongers • Mar 27 '22

Ah good point I actually forgot to do that, thanks Shivam.

zoodika • Jul 17 '24

چند نقل قول براي ارسال پيام براي بهترين دوست
حتماً، در اينجا چند نقل قول زيبا براي ارسال به بهترين دوستتان آورده شده است:
پيامي براي بهترين دوست من ارسال کن
"دوست واقعي کسي است که دستت را بگيرد و قلبت را لمس کند."
"دوستان مثل ستاره‌ها هستند، هميشه نمي‌تواني آن‌ها را ببيني، اما مي‌داني که هميشه آنجا هستند."
"دوستي يعني يک روح در دو بدن." - ارسطو
"يک دوست خوب مثل شبدر چهاربرگي است: پيدا کردنش دشوار است، اما داشتنش خوشبختي است."
"دوست کسي است که همه چيز را درباره تو مي‌داند و هنوز هم دوستت دارد." - البرت هوبارد
"در سخت‌ترين زمان‌ها، بهترين دوستان ظاهر مي‌شوند."

Nabil Alamin • Mar 26 '22

This a wonderful series

Chris Bongers • Mar 27 '22

Thanks Nabil

SVGator • Mar 28 '22

This is such a fun series!

Chris Bongers • Mar 28 '22

Thank you 💖