scss スプライト生成，座标取得，视网膜対応のSass.Compass关数のメモ

Posted 2021-05-18

@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);
	}