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

Question

我想为两种不同的场景使用 Compass 生成的图标 Sprite 。

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

我首先这样做:

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

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

两个实现了我可以使用这个的第二个结果(darren131 / gist:3410875 - resize sprites in Compass):

@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 个 Logo ，我将需要为每个 sprite 类手动重复此操作。

是否可以两次导入文件夹，一次是原始大小，第二次是 backround-size属性(property)？或修改上述方法以在另一个 <div class="my-other-div-with-small-logos"> 中自动创建所有类哪里的图标应该显得更小？

还是我的思路错了？

Answer 1

就是这样。它遍历整个 map :

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

这有帮助:Way to iterate over sprites in a map

在现代浏览器中缩小 sprite 而不加载另一个生成的 sprite-image 是很棒的。如果 Logo 有时是 50 像素，但其他地方也应该是 20 像素，这完全没问题。