<ul class="button-list">
  <li><a href="#" class="button top active"><span class="sprite">トップ</span></a></li>
  <li><a href="#" class="button blog"><span class="sprite">ブログ</span></a></li>
  <li><a href="#" class="button latest"><span class="sprite">新着</span></a></li>
  <li><a href="#" class="button popular"><span class="sprite">人気</span></a></li>
  <li><a href="#" class="button recommended"><span class="sprite">おすすめ</span></a></li>
  <li><a href="#" class="button search"><span class="sprite">検索</span></a></li>
</ul>

.item1-1x{width:42px; height:15px; background-position: -107px -25px}
.item1-2x{width:82px; height:29px; background-position: -5px -91px}
.item1-active-1x{width:42px; height:15px; background-position: -154px -25px}
.item1-active-2x{width:82px; height:29px; background-position: -313px -91px}
.item1-hover-1x{width:42px; height:15px; background-position: -201px -25px

$item1-1x: 42px 15px -107px -25px;
$item1-2x: 82px 29px -5px -91px;
$item1-active-1x: 42px 15px -154px -25px;
$item1-active-2x: 82px 29px -313px -91px;
$item1-hover-1x: 42px 15px -201px -25px;
　省略
$item6-1x: 30px 15px -334px -5px;
$item6-2x: 59px 29px -318px -57px;
$item6-active-1x: 30px 15px -369px -5px;
$item6-active-2x: 59px 29px -254px -57px;
$item6-hover-1x: 30px 15px -229px -5px;

// 配列と拡大率からスプライト画像を配置するミックスインを定義
@mixin sprite($sprite, $scale:1) {
    // スプライト画像全体の横幅・高さをここに入力
    $sprite-width: 477px;
    $sprite-height: 125px;
    // 背景画像サイズを計算
    background-size: $sprite-width * $scale, $sprite-height * $scale;
    // オフセットを計算
    $sprite-offset-x: nth($sprite, 3) * $scale;
    $sprite-offset-y: nth($sprite, 4) * $scale;
    background-position: $sprite-offset-x $sprite-offset-y;
    // 表示サイズを計算
    width: nth($sprite, 1) * $scale;
    height: nth($sprite, 2) * $scale;
}

// map型データを作成
$spriteMap: (
    top: (
        // PC用データ (通常, ホバー用, アクティブ用)
        pc: ($item1-1x, $item1-hover-1x, $item1-active-1x),
        // SP用データ (通常, アクティブ用)
        sp: ($item1-2x, $item1-active-2x)
    ),
　省略
    search: (
        pc: ($item6-1x, $item6-hover-1x, $item6-active-1x),
        sp: ($item6-2x, $item6-active-2x)
    )
);

// map型データを対象にループでルールを作成
@each $key, $item in $spriteMap {
    $pc: map-get($item, pc); $sp: map-get($item, sp);
    .#{$key} { // インターポレーションを使い、class名にmapのキー名を代入
        > .sprite { // SPサイズ
          @include sprite(nth($sp, 1), 0.5);
        }
        &.active > .sprite { // SPアクティブ状態
            @include sprite(nth($sp, 2), 0.5);
        }
        @media all and (min-width: 600px) {
            > .sprite { // PCサイズ
              @include sprite(nth($pc, 1), 1); 
            }
            &:hover > .sprite { // PCサイズホバー状態
                @include sprite(nth($pc, 2), 1); 
            }
            &:active > .sprite, // PCサイズアクティブ状態
            &.active > .sprite {
                @include sprite(nth($pc, 3), 1);
            }
        }
    }
}
.sprite {
  background-image: url(./sprite.png);
  background-repeat: no-repeat;
  text-indent: 100%; overflow: hidden;
  white-space: nowrap; display: inline-block;
}