如何创建一个文件夹一个小妖精，没有背景的大小（用罗盘）(How to create a sprite

我想用一个罗盘图标生成，雪碧两种不同的情况。

在使用原始大小的图标（S）。
使用相同的图标（S）为使用CSS3属性的缩小版background-size 。

我第一次这样做：

$logo-spacing: 20px;
@import "logo/*.png";
@include all-logo-sprites;

现在，我可以使用一般的创建CSS类像.logo-twitter等。

两种实现第二个结果，我可以用这个（ darren131 /要点：3410875 -调整精灵罗盘）：

@mixin resize-sprite($map, $sprite, $percent) {
  $spritePath:    sprite-path($map);
  $spriteWidth:   image-width($spritePath);
  $spriteHeight:  image-height($spritePath);
  $width: image-width(sprite-file($map, $sprite));
  $height: image-height(sprite-file($map, $sprite));

  @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
  width: ceil($width*($percent/100));
  height: ceil($height*($percent/100));
  background-position: 0 floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) );
}

.my-other-div-with-small-logos {
    .logo-twitter {
        $spriteName: twitter;
        $percentage: 40;

        @include resize-sprite($logo-sprites, $spriteName, $percentage);
    }
}

但是，如果我有大约30个标志我需要手动重复此为每个精灵类。

是否有可能导入的文件夹两次，一次为原始大小，第二次与backround-size财产？或修改提到的方法中的另一个自动创建的所有类<div class="my-other-div-with-small-logos">其中的图标应该显得更小？

还是我在这里走错了方向想什么？

Answer 1:

这就行了。它遍历整个地图上：

@each $sprite in sprite_names($logo-sprites) {
    .logo-#{$sprite} {
        @include resize-sprite($logo-sprites, $sprite, 40);
    }
}

这有助于：路遍历精灵在地图

这是伟大的缩小在现代浏览器精灵无需加载另一个生成精灵图像。如果标识有时是50像素，但也应该在其他地方为20px，这是完全正常的。

Answer 2:

谢谢大家这一点。有用！现在，我已经取得了进展，并扩大它作为我需要的东西，其中的图标是基于ico-【尺寸】构建多了几分动感ico- [图片] swatch- [颜色]

$myicons-spacing: 20px;

@import "icons/myicons/*.png";
@include all-myicons-sprites;


@mixin resize-sprite($map, $sprite, $percent) {
  $spritePath    :  sprite-path($map);
  $spriteWidth   :  image-width($spritePath);
  $spriteHeight  :  image-height($spritePath);
  $width         :  image-width(sprite-file($map, $sprite));
  $height        :  image-height(sprite-file($map, $sprite));

  @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));

  width                :  ceil($width*($percent/100));
  height               :  ceil($height*($percent/100));
  background-position  :  0 floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) );
}

@each $sprite in sprite_names($myicons-sprites) {
  .ico-xsmall.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 35);
  }

  .ico-small.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 50);
  }

  .ico-medium.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 87.5);
  }

  .ico-large.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 100);
  }
}

Answer 3:

创建一个循环为每个占位符，然后包括你需要的地方的占位符。例如：

@mixin resize-sprite($map, $sprite, $percent) {
  $spritePath:    sprite-path($map);
  $spriteWidth:   image-width($spritePath);
  $spriteHeight:  image-height($spritePath);
  $width: image-width(sprite-file($map, $sprite));
  $height: image-height(sprite-file($map, $sprite));

  @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
  width: ceil($width*($percent/100));
  height: ceil($height*($percent/100));
  background-position: 0 floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) );
}

@each $image in twitter, facebook, pinterest {
  %logo-#{$image} {
    @include resize-sprite($logo-sprites, $image, 40);
  }
}

.my-other-div-with-small-logos {
    .logo-twitter {
        @extend %logo-twitter;
    }
}

请注意，这是假定所有的图像应该由40％调整大小。如果您需要为不同的标识指定不同的百分比你需要做更多的创造性的迭代。

更重要的是，也许只是产生在循环中的类？

.my-other-div-with-small-logos {
  @each $image in twitter, facebook, pinterest {
    .logo-#{$image} {
      @include resize-sprite($logo-sprites, $image, 40);
    }
  }
}

文章来源: How to create a sprite from a folder with and without background-size (using Compass)