指南针精灵图像和缩放

Question

我已经花了4个小时尝试使用Compass和Sass创建一个精灵图像，并自动缩放每个单独的图像以供在background-size属性中使用。

我找到的所有方法都不起作用，真不敢相信这是那么困难。

有人有可行的示例吗？

编辑：以下是我目前的进展

@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) );
}

@mixin resize-sprite-set($map, $percent, $only...) {
  $name: sprite_map_name($map);

  @each $sprite in sprite_names($map) {
    @if length($only) == 0 or index($only, $sprite) != false {
      .#{$name}-#{$sprite} {
        @include resize-sprite($map, $sprite, $percent);
      }
    }
  }
}

混合返回没有错误。

$my-icons-spacing: 10px; // give some space to avoid little pixel size issues on resize

@import "my-icons/*.png";

$my-icons-sprite-dimensions: true;

@include all-my-icons-sprites;

// the fun part

.small-icons { // overriding all sprites
  @include resize-sprite-set($my-icons-sprites, 40); // 40% sized
}

.some-part-of-my-site {
  @include resize-sprite-set($my-icons-sprites, 40, logo, ok); // will create overrides only for sprites "logo" and "ok"
}

当我尝试通过 Prepros 应用程序进行编译时，从上述实现中获得以下错误信息。

remove ../images/my-icons-s9e77ab1ef1.png
   create ../images/my-icons-s9e77ab1ef1.png
    error style.scss (Line 62 of _mixins.scss: Undefined mixin 'resize-sprite-set'.)
identical ../css/style.css 

- Chozen

---

不知道这是否有帮助，但是这个链接似乎与之相关。也许你可以向我们展示哪些部分无法正常工作？ - Scott Solmer

我添加了我正在使用的代码。 - Chozen

Answer 1

我也做了一些研究。以下是我的精华： https://gist.github.com/apauly/7917906 更新：

解决方案取决于三个关键部分：

1. 缩放宽度
2. 缩放高度
3. 获取背景位置

0. 获取完整 sprite 和单个图标的尺寸：

$icon-file: sprite-file($map, $icon);
$icon-width: image-width($icon-file);
$icon-height: image-height($icon-file);

$sprite-file: sprite-path($map);
$sprite-width: image-width($sprite-file);
$sprite-height: image-height($sprite-file);

1. 考虑一个显示为精灵图的 div。设置 background-size: 100%; 来确保背景精灵图覆盖整个 div 的宽度。 如果使用 width: 100%;，结果会像这样：

+----------------+
|--|             | 
|----------------| 
|--------|       | <--- This is the sprite image we want to display 
|------|         |
+----------------+

所以我们需要扩大我们的背景以获得类似这样的效果：（虽然div应该有overflow:hidden）

+----------------+
|---------|             | 
|-----------------------| 
|----------------|      | <---
|-------------|         |
+----------------+

为了实现这一点，只需将完整精灵的宽度除以单个图标的宽度：

width:percentage($sprite-width / $icon-width);

2. 这个技巧基本上是受到tkenny的博客文章启发的： http://inspectelement.com/tutorials/a-responsive-css-background-image-technique/

生成的sass代码如下：

display: block;
height: 0;
padding-bottom: percentage($icon-height / $icon-width);
background-size: 100%;

3. 其余部分只是一些基本数学计算，用于计算精灵图标内部的顶部间距作为相对值：

获取像素的顶部间距（负值）：

$space-top:floor(nth(sprite-position($map, $icon), 2));

Sass需要一个像素值(px-value)

@if $space-top == 0 {
  $space-top: 0px
}

使用百分比设置背景位置:

background-position:0 percentage(
  -1 * $space-top / ( $sprite-height - $icon-height )
);

- Alex

Answer 2

这是一个可美观地调整精灵大小的mixin。

@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) );
}

以下是原网址：https://gist.github.com/darren131/3410875

这段代码涉及IT技术。

- DMTintner