Social sharing buttons

by Aakash Chakravarthy

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul class="socializer socializer--32px socializer--solid socializer--round socializer--pad socializer--flui">

<li class="socializer__twitter socializer--text">
<a href="#"><i class="fa fa-twitter"></i>Twitter <span>20</span></a>
</li>

<li class="socializer__facebook socializer--text">
<a href="#"><i class="fa fa-facebook"></i><span>Facebook</span></a>
</li>

<li class="socializer__google-plus">
<a href="#"><i class="fa fa-google-plus"></i></a>
</li>

<li class="socializer__linkedin">
<a href="#"><i class="fa fa-linkedin"></i><span>Linked In</span></a>
</li>

<li class="socializer__rss">
<a href="#"><i class="fa fa-rss"></i><span>RSS</span></a>
</li>

<li class="">
<a href="#"><img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/23-32.png" /><span>RSS</span></a>
</li>

</ul>

<h3>
Hello
</h3>

SCSS

$sites: (
  twitter: (
    color: #00ccff,
  ),
  facebook: (
    color: #3e5b98
  ),
  google-plus:(
    color: #d93e2d
  ),
  linkedin:(
    color: #3371b7
  ),
  rss:(
    color: #f26109
  )
);

$size-list: ( 16px, 32px, 48px, 64px );

@mixin btn-sizes() {
    @each $size in $size-list{
        .socializer--#{$size} a{
            width: $size !important;
            height: $size !important;
            line-height: $size !important;
            font-size: $size/2 !important;
         }
     }
}

.socializer{
    padding: 0;
    margin: 0;
    //border: 1px solid red;
    display: inline-block;
    
    // Default font-size
    $size: 16px;
    
    li{
        float: left;
        list-style: none;
        padding: 0;
        margin: 0;
        display: inline-block;
        position: relative;
        
        a{
            display: inline-block;
            border: 0;
            text-align: center;
            text-decoration: none;
            width: $size;
            height: $size;
            line-height: $size+2;
            font-size: $size/2;
            
            &>*{
                display: inline-block;
                //vertical-align: middle;
                padding: 0;
                margin: 0;
            }
            
        }
    }
    &:after{
        content: '';
        clear: both;
        display: block;
    }
}

@include btn-sizes();

@each $site, $prop in $sites{
    .socializer__#{$site} a{
        color: map-get($prop, 'color');
        border-color: map-get($prop, 'color');
        background-color: map-get($prop, 'color');
    }
}

.socializer--text a{
    width: auto !important;
    padding: 0 0.5em;
    &>*{
      padding-right: 0.5em !important;  
    }
    &*:last-child{
        padding-right: 0;
    }
}

.socializer--solid a{
    color: #fff !important;
}
.socializer--line a{
    border: 1px solid !important;
    background-color: transparent !important;
}
.socializer--white1 a{
    background: #fff;
    color: #333...