Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Craig Watson
Craig Watson
Courses Plus Student 27,150 Points

Check out my Social Icon Mixin

Hi everyone!

Just had a play around with this today and if anyone has ways to improve / add to this that would be cool!

Not sure how often you would use this with a sprite sheet probably being faster to load but I'm just learning Sass so thought id mess around with it!

Let me know your thoughts :)

link

Craig

1 Answer

Sean T. Unwin
Sean T. Unwin
28,688 Points
Sean T. Unwin
Sean T. Unwin
28,688 Points

Pretty handy mixin, Craig. I could see it being used for any number of custom icons.

To allow for some organization with multiple icons, I added a little snippet to allow a list to be accepted:

@mixin social-icons($icons...) {
  $iArr: '';
  @if length($icons) == 1 and type-of(nth($icons, 1)) == list {
    $iArr: nth($icons, 1);  
  } @else {
    $iArr: $icons;
  }
  // Change '@each $icon in $icons' to:
  @each $icon in $iArr {
    .icon-#{$icon} {
      // properties here
    }
  }
}

So now as an alternative to:

@include social-icons(twitter, facebook, pinterest, instagram);

you can also use

$iconlist: twitter, facebook, pinterest, instagram;
@include social-icons($iconlist);
Craig Watson
Craig Watson
Courses Plus Student 27,150 Points

Thanks Sean :) ,

I really like being able to use a list like that, being quite new to Sass I wasn't aware this was possible!

I will add this and a few examples using this method to the pen!

Thanks again Sean !