Sass 3.3で画像ファイル名に@2xを付ける関数

Retinaディスプレイ用の画像のために変数を定義するのがダルいので関数で@2xを付けれるようにしました。

function-image-retina.scss

@function image-retina($image, $suffix: '@2x') {
  $pos: str-index($image, '.');
  $proc: $pos;

  @while ($proc > 0) {
    $i: str-index(str-slice($image, $proc + 1), '.');
    @if $i > 0 {
      $pos: $i;
    }
    $proc: $i;
  }

  $pos: if($pos > 0, $pos, str-length($image) + 1);
  $file-name: str-insert($image, $suffix, $pos);
  @return image-url("#{$file-name}");
}

$image-logo: "logo.png";

#site-name a {
  background-image: image-retina($image-logo);  // => url("images/[e-mail]")
}