// Thanks to Alain Galvan (//codepen.io/alaingalvan) for suggesting this variable:

$background: hsl(210, 45, 10)

//www.paulirish.com/2012/box-sizing-border-box-ftw
*, *:before, *:after
  box-sizing: border-box

html
  background: $background
  font-size: 0.625em // 10px, for rems

.soc
  display: block
  font-size: 0
  list-style: none
  margin: 0
  padding: 32px // IE8
  padding: 3.2rem
  text-align: center
  li
    display: inline-block
    margin: 8px // IE8
    margin: 0.8rem
  a, svg
    display: block
  a
    position: relative // IE8
    height: 96px // IE8
    height: 9.6rem
    width: 96px // IE8
    width: 9.6rem
  svg
    height: 100%
    width: 100%
  // IE8:
  span
    font-size: 14px
    line-height: 1.5
    margin-top: -0.75em
    position: absolute
    text-align: center
    top: 50%
    right: 0
    bottom: 0
    left: 0

// Using placeholder selectors and @extend (keeps output CSS lean) instead of [class*='icon-'] attribute selector because IE8 doesn't support it :<

%social-icon-hover
  border-radius: 100%
  color: $background // IE8
  fill: $background
  transition: background-color 0.5s

// This color trick is so neat! I can't live without Sass <3

@for $i from 1 through 28
  .icon-#{$i}
    color: hsl($i * 13, 70, 50) // IE8
    fill: hsl($i * 13, 70, 50)
    &:hover
      background: hsl($i * 13, 70, 50)
      @extend %social-icon-hover