Retina対応のスプライト関数で作る画像グローバルナビmixin【Scss & Compass】
画像を使うGrobalNaviに使える。
*マジックインポートでhover画像もまとめて一枚にすると、Retina対応をさせるためサイズ縮小する際比率がおかしくなるので、まとめずに一枚画像で呼び出している。
使用する画像を用意
とりあえず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>