Ich möchte ein von Compass generiertes Icon-Sprite für zwei verschiedene Szenarien verwenden.

Verwenden Sie die Symbole in Originalgröße.Verwenden Sie dasselbe Symbol (dieselben Symbole) wie eine kleinere Version unter Verwendung der CSS3-Eigenschaftbackground-size.

Ich mache das zuerst:

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

Jetzt kann ich die generell erstellten CSS-Klassen gerne nutzen.logo-twitter usw.

Zwei erzielen das zweite Ergebnis, das ich verwenden könnte (darren131 / gist: 3410875 - Ändere die Größe von 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);
    }
}

Aber wenn ich ungefähr 30 Logos habe, müsste ich das für jede Sprite-Klasse manuell wiederholen.

Ist es möglich, den Ordner zweimal zu importieren, einmal für die Originalgröße und ein zweites Mal mit derbackround-size Eigentum? Oder ändern Sie die erwähnte Methode, um alle Klassen automatisch in einer anderen zu erstellen<div class="my-other-div-with-small-logos"> wo sollen die symbole kleiner erscheinen

Oder denke ich hier in die falsche Richtung?