スプライト生成、座標取得、Retina対応のSass。Compass関数のメモ
@import "compass";
@import "support_vendor_prefix";
@import "vendor_prefixed_mixin";
$sprites-spacing: 4px;
$sprites: sprite-map("pc/common/parts/*.png", $spacing: $sprites-spacing);
$sprites-img: sprite-url($sprites);
//sprites-map関数でスプライトシートを作成
//sprite-url関数で座標取得
//$sprites-img: sprite-url($sprites);
//引数にファイル名:スプライトから引数に渡されたファイルの座標を取得(そのファイルが入ってるスプライトシート)
@mixin sprite-base-bg($sprites,$sprites-img,$pixelRatio:2){
background: $sprites-img no-repeat;
$sprite-file-data: sprite-path($sprites);
@include prefixed-property("background-size,",ceil(image-width($sprite-file-data) / 2) auto);
}
//@includeは引数を与えられるのが特徴
//画像サイズを自動で取得する。(image-width / image-height)
//width: image-width("gazou.png");
//ceil 小数点以下切上げ ceil($value);
//sprite-path関数:画像パスを取得
//width: round($img_width/2);
//roundというのは四捨五入を行う関数です。2で割って四捨五入した値を返す
.test{
@include sprite-base-bg($sprites,$sprites-img,2);
}