Wie man einen Sprite aus einem Ordner mit und ohne background-size erstellt (mit Verwendung von Compass)

Question

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

1. Verwenden Sie die Symbole in Originalgröße.
2. Verwenden Sie die gleichen Symbole als kleinere Version mit Hilfe der CSS3-Eigenschaft background-size.

Zuerst mache ich dies:

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

Jetzt kann ich die generierten CSS-Klassen wie .logo-twitter usw. verwenden.

Um das zweite Ergebnis zu erreichen, könnte ich dies verwenden (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);
    }
}

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

Ist es möglich, den Ordner zweimal zu importieren, einmal für die Originalgröße und ein zweites Mal mit der backround-size-Eigenschaft? Oder die genannte Methode ändern, um alle Klassen automatisch innerhalb eines anderen

zu erstellen, wo die Symbole kleiner erscheinen sollen?

Oder denke ich hier in die falsche Richtung?

Answer 1

Das war es. Es durchläuft die ganze Karte:

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

Dies hat geholfen: Möglichkeit zur Iteration über Sprites in einer Karte

Es ist großartig, Sprites in modernen Browsern zu verkleinern, ohne ein weiteres generiertes Sprite-Bild laden zu müssen. Wenn die Logos manchmal 50px groß sind, aber an anderer Stelle auch 20px sein sollen, ist das vollkommen in Ordnung.

Answer 2

Vielen Dank an alle dafür. Es funktioniert! Jetzt bin ich weitergegangen und habe es erweitert, da ich etwas Dynamischeres brauchte, bei dem Icons basierend auf ico-[Größe] ico-[Bild] & swatch-[Farbe] konstruiert werden

$myicons-spacing: 20px;

@import "icons/myicons/*.png";
@include all-myicons-sprites;

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

@each $sprite in sprite_names($myicons-sprites) {
  .ico-xsmall.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 35);
  }

  .ico-small.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 50);
  }

  .ico-medium.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 87.5);
  }

  .ico-large.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 100);
  }
}

Answer 3

Erstellen Sie Platzhalter für jeden in einer Schleife und fügen Sie dann den Platzhalter überall dort ein, wo Sie ihn benötigen. Zum Beispiel:

@mixin resize-sprite($map, $sprite, $Prozent) {
  $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 * ($Prozent/100)) ceil($spriteHeight * ($Prozent/100)));
  width: ceil($width*($Prozent/100));
  height: ceil($height*($Prozent/100));
  background-position: 0 floor(nth(sprite-position($map, $sprite), 2)  * ($Prozent/100) );
}

@each $image in twitter, facebook, pinterest {
  %logo-#{$image} {
    @include resize-sprite($logo-sprites, $image, 40);
  }
}

.my-other-div-with-small-logos {
    .logo-twitter {
        @extend %logo-twitter;
    }
}

Beachten Sie, dass hier davon ausgegangen wird, dass alle Bilder um 40% verkleinert werden sollen. Sie müssen kreativer iterieren, wenn Sie unterschiedliche Prozentsätze für verschiedene Logos angeben müssen.

Noch besser wäre es vielleicht, die Klassen einfach in der Schleife zu generieren?

.my-other-div-with-small-logos {
  @each $image in twitter, facebook, pinterest {
    .logo-#{$image} {
      @include resize-sprite($logo-sprites, $image, 40);
    }
  }
}