image-link (text-indent -9999px replacement) SASS mixin

image-link.scss

@mixin image-link($width, $height, $src) {
  display: block;
  width: $width;
  height: $height;
  background-image: url($src);
  // if using Rails 3.x Asset Pipeline you can use the following instead
  // background-image: image-url($src);
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  a {
    display: block;
    width: 100%;
    height: 100%;
  }
}

// Inspired by http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

// USAGE
// HTML: <a id="example" href="http://example.com">Example</a>
// or (depending on situation): <div id="example"><a href="http://example.com">Example</a></div>
// SCSS: #example{ @include image-link(244px, 260px, "logo.png"); }