<nav role="navigation">
  <ul>
    <li>
      <a href="#">
        <span class="inner"></span>
        <i class="icon-home"></i>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="inner"></span>
        <i class="icon-html5"></i>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="inner"></span>
        <i class="icon-css3"></i>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="inner"></span>
        <i class="icon-stackexchange"></i>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="inner"></span>
        <i class="icon-github"></i>
      </a>
    </li>
  </ul>
</nav>

@import "compass/css3";

$dark: #20826c;
$light: #fff;
$spacing: 40px;
$border: 2px;

$hover-size: $spacing * 2 - $border * 2;
$hover-margin: -38px;

/*
 * These hover-margin's don't work for some reason
 * 0 - $spacing - $border
 * ($spacing + $border) * -1
*/

body { background-color: $dark; }

nav { padding: $spacing; }

nav li {
  float: left;
  font-size: 2em;
  margin-right: $spacing;
  line-height: $spacing * 2;
  position: relative;
  text-align: center;
  
  a {
    background-color: $light;
    color: $dark;
    display: block;
    height: $spacing * 2;
    position: relative;
    text-decoration: none;
    width: $spacing * 2;
    
    @include border-radius(50%);
    @include transition(color 0.1s);

    i {
      position: relative;
      z-index: 1;
    }

    .inner {
      background-color: $dark;
      display: block;
      height: 0;
      left: 50%;
      margin: 0;
      position: absolute;
      top: 50%;
      width: 0;
  
      @include border-radius(50%);
      @include transition(all 0.1s);
    }

    &:hover {
      color: $light;

      .inner {
        height: $hover-size;
        margin-left: $hover-margin;
        margin-top: $hover-margin;
        width: $hover-size;
      }
    }
  }
}