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/logo@2x.png")
}