Hide text and replace image mixin.

hide_text_and_replace_Image.sass

@mixin at2x($image_name, $extention: '.png')
  background: image_url($image_name + $extention) no-repeat center center
  background-size: image-width($image_name + $extention) image-height($image_name + $extention)
  width: image-width($image_name + $extention)
  height: image-height($image_name + $extention)
  display: block
  $x2img : $image_name + '@2x' + $extention
  @media all and (-webkit-min-device-pixel-ratio : 1.5)
    background-image: image_url($x2img)
    background-size: image-width($image_name + $extention) image-height($image_name + $extention)
    width: image-width($image_name + $extention)
    height: image-height($image_name + $extention)
 
@mixin hide-text($image_name, $extention: '.png')
  background: image_url($image_name + $extention) no-repeat center center
  background-size: image-width($image_name + $extention) image-height($image_name + $extention)
  text-indent: 100%
  white-space: nowrap
  overflow: hidden
  display: block
  width: image-width($image_name + $extention)
  height: image-height($image_name + $extention)
 
  $x2img : $image_name + '@2x' + $extention
  @media all and (-webkit-min-device-pixel-ratio : 1.5)
    background: image_url($x2img) no-repeat center center
    background-size: image-width($image_name + $extention) image-height($image_name + $extention)
    text-indent: 100%
    white-space: nowrap
    overflow: hidden
    display: block
    width: image-width($image_name + $extention)
    height: image-height($image_name + $extention)

//---------------------------------------------------------------------------
Only rerina optimized.
//PNG
@include at2x(logo)

//Other Extentions
@include at2xt(logo, '.jpg')

Retina optimized and hide text.
//PNG
@include hide-text(logo)

//Other Extentions
@include hide-text(logo, '.jpg')