ul#side-menu
  each social in [ "facebook", "github", "instagram", "linkedin", "pinterest", "twitter", "vimeo", "youtube"]
    li(class=social)
      a(href="#")= social
      i.fa(class="fa-" + social)

$social-size: 50px;

$socials: (
 facebook: #3b5998,
 github: #4183c4,
 instagram: #517fa4,
 linkedin: #007bb6,
 pinterest: #cb2027,
 twitter: #00aced,
 vimeo: #aad450,
 youtube: #b00
);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


ul, li {
  list-style-type: none;
}

.container {
  max-width: 500px;
  margin: 2em auto;
  p {
    margin-bottom: 1.5em
  }
}
ul#side-menu {
  position: fixed;
  top: 50vh;
  transform: translateY(-50%);
  li {
    display: block;
    left: -100px;
    position: relative;
    width: 100px + $social-size;
    height: $social-size;;
    line-height: $social-size;
    transition: 0.35s ease;
    &:hover {
      left: 0;
    }
    
    a {
      text-decoration: none;
      display: block;
      float: left;
      width: 100px;
      padding-left: 12px; 
      color: #EFEFEF;
      text-transform: capitalize;
    }
    
    .fa {
      display: block;
      width: $social-size;
      text-align: center;
      float: right;
      font-size: $social-size * 0.6;
      line-height: $social-size;
      color: #EFEFEF;
    }
  }
}

@each $social, $color in $socials {
  li.#{$social} {
    background-color: darken($color, 5%);
    .fa {
      background-color: $color;
    }
  }
}