inoma-NOTE

自分のためのメモじゃ

Retina対応のスプライト関数で作る画像グローバルナビmixin【Scss & Compass】

画像を使うGrobalNaviに使える。

*マジックインポートでhover画像もまとめて一枚にすると、Retina対応をさせるためサイズ縮小する際比率がおかしくなるので、まとめずに一枚画像で呼び出している。

使用する画像を用意

f:id:inoma_design:20160601092739p:plain
とりあえず3つ用意。
hover時の画像は_hoverと付けておく。

*今回のやり方だと画像の幅は統一すること。

SCSS

あらかじめ「config.rb」の方で画像のリンク先「images_dir」を指定しておく。

@import "compass";//compassを呼び出す

$gbnav-map: sprite-map("gbnav/*.png");//gbnavフォルダの画像を読み込み
$gbnav-size:image-width(sprite-file($gbnav-map,nav01));
//gbnav画像サイズの原寸を計るためnav01.pngを呼び出している。

// 繰り返し処理
//=================================

$value: 1;
$i: 2;//サイズを半分にする

@while  $value <= 3 {//gbnavの数
    .nav0#{$value}{
        background: image-url("gbnav/nav0#{$value}.png") no-repeat{
            size: ($gbnav-size / $i) ($gbnav-size / $i);
        }
        &:hover{
            background: image-url("gbnav/nav0#{$value}_hover.png") no-repeat{
                size: ($gbnav-size / $i) ($gbnav-size / $i);
            }
        }
    }
    $value: $value + 1;
}

// .gbNav
//=================================

.gbNav{
    width: 960px;
    ul{
        @include horizontal-list(0px);//横並びのcompass関数
        li{
            width:$gbnav-size / $i;
            height:$gbnav-size / $i;
            cursor: pointer;
        }
    }
}

width:800pxの画像なら$iで半分にするため2の値を入れているので、width:400pxで表示される。
その都度縮小したい値を$iに入れる。

HTML

<div class="gbNav">
    <ul>
        <li class="nav01"><a href=""></a></li>
        <li class="nav02"><a href=""></a></li>
        <li class="nav03"><a href=""></a></li>
    </ul>
</div>