In den letzten vier Stunden habe ich versucht, mit Compass und sass ein Sprite-Bild zu erstellen, das jedes einzelne Bild automatisch für die Verwendung mit der Eigenschaft "Hintergrundgröße" skaliert.

Nichts, was ich gefunden habe, kann nicht glauben, dass es so schwierig ist.

Hat jemand ein funktionierendes Beispiel?

Edit: Das habe ich bisher

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

Das Mixin liefert keine Fehler.

$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"
}

Wenn ich versuche zu kompilieren, wird die folgende Fehlermeldung von der obigen Implementierung angezeigt. Über die Prepros App.

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