scss 用sass /指南针制作的精灵图像

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 用sass /指南针制作的精灵图像相关的知识,希望对你有一定的参考价值。

/*
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);
}

以上是关于scss 用sass /指南针制作的精灵图像的主要内容,如果未能解决你的问题,请参考以下文章

SCSS/SASS 指南

scss使用指南--每天一点

基础 4、指南针和 SASS

指南针和 sass:可以自动导入所有部分吗? [复制]

scss 由SassMeister.com,Sass游乐场制作。

scss 六角裁剪图像SASS mixin