如何从具有和不具有背景大小的文件夹创建精灵(使用Compass)

Question

我想在两种不同的场景中使用Compass生成的图标精灵.

1. 使用原始大小的图标.
2. 使用与使用CSS3属性的较小版本相同的图标background-size.

我先这样做:

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

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

两个实现我可以使用的第二个结果(darren131/gist:3410875 - 在Compass中调整sprite的大小):

@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 像素，但在其他地方也应该是 20 像素，这完全没问题。