DEV Community

Cover image for CSS Logos: React logo

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 ...
Collapse
 
renanfranca profile image
Renan Franca

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!

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
 
dailydevtips1 profile image
Chris Bongers

@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
 
renanfranca profile image
Renan Franca

Thank you for the detailed explanation 😃

Collapse
 
dailydevtips1 profile image
Chris Bongers

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

Collapse
 
dailydevtips1 profile image
Chris Bongers

Awesome keep it up Renan

Collapse
 
arndom profile image
Nabil Alamin

This a wonderful series

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks Nabil

Collapse
 
shivams136 profile image
Shivam Sharma

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

Collapse
 
dailydevtips1 profile image
Chris Bongers

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

Collapse
 
zoodika profile image
zoodika

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

Collapse
 
svgatorapp profile image
SVGator

This is such a fun series!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thank you 💖