Illustrates another way of vertically centring icons from a Compass sprite sheet, based on the example by Tracy Rotton on the Treehouse blog: http://blog.teamtreehouse.com/the-ecstasy-and-agony-of-compass-sprite-generation-part-1

demo.html

<ul>
  <li><a href="#"><i class="icon-newspaper"></i> Newspaper</a></li>
  <li><a href="#"><i class="icon-comment"></i> Comment</a></li>
  <li><a href="#"><i class="icon-telephone"></i> Telephone</a></li>
  <li><a href="#"><i class="icon-shoppingcart"></i> Shopping Cart</a></li>
</ul>

example.scss

// base class for icons
.icon {
  @include inline-block;
  position: relative;
}

// our icons as a list of names referring to our filenames without the extension.
$nav-icon-list: newspaper, comment, telephone, shoppingcart;

@each $icon in $nav-icon-list {
  // this loops over our $nav-icons list
  // $icon refers to the current list item.
  
  // grab the source image's dimensions, more info:
  // - dimension helpers » http://compass-style.org/reference/compass/helpers/image-dimensions/
  // - sprite helpers » http://compass-style.org/reference/compass/helpers/sprites/#sprite-file
  $height: image-height( sprite-file( $icon-sprite, $icon ) );
  $width:  image-width(  sprite-file( $icon-sprite, $icon ) );

  .icon-#{unquote( $icon )} {
    @extend .icon;

    &:before {
      // injects the icon itself, we can use position absolute because the <i>
      // gives us a safe position:relative container.
      content: " ";
      
      @include inline-block;
      height: $height;
      width: $width;
      
      position:absolute;
      left: 0;
      top:50%;
      
      margin-top: -#{($height / 2)};
    }
  }
}