/*
Sprite image made with sass/compass
Following names can change
sprite_folder_name : The name of the folder that contains the image for the sprite
sprites_name : Sprite map name
sprite_mixin_name : Mixin for sprite
original_img_name : Each icons or image name
spriteimg_xs_size : Argument for change size
*/
/* Folder for sprite */
@import "sprite_folder_name/*.png";
$sprites_name: sprite-map("sprite_folder_name/*.png");
/* Set mixin for sprite */
@mixin sprite_mixin_name($name) {
background-image: url(../img/sprite_folder_name.png);
background-repeat: no-repeat;
display: block;
width: image-width(sprite-file($sprites_name, $name));
height: image-height(sprite-file($sprites_name, $name));
$ypos: round(nth(sprite-position($sprites_name, $name), 2));
background-position: 0 $ypos;
}
/* Argument for change size (optional) */
$spriteimg_xs_size: .8;
/* Make classes for each images */
/* image01 */
.original_img_name01 { // class name can change as you like
@include sprite_mixin_name(original_img_name01);
// for smartphone size with bootstrap(optional)
@media (max-width: $screen-xs-max) {
width: image-width("sprite_folder_name/original_img_name01.png") * $spriteimg_xs_size;
height: image-height("sprite_folder_name/original_img_name01.png") * $spriteimg_xs_size;
background-size: round(image-width("sprite_folder_name01.png") * $spriteimg_xs_size) round(image-height("sprite_folder_name.png") * $spriteimg_xs_size);
background-position: 0 round(nth(sprite-position($sprites_name, original_img_name01), 2) * $spriteimg_xs_size);
}
}
/* image02... Repeat for the number of images */
.original_img_name02 {
@include sprite_mixin_name(original_img_name02);
}