toshieeeee
7/11/2015 - 5:08 PM

スプライト生成、座標取得、Retina対応のSass。Compass関数のメモ

スプライト生成、座標取得、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);
	}