Compass Sprite Bild und Skala

Question

Ich habe die letzten 4 Stunden damit verbracht, einen Weg zu finden, ein Sprite-Bild mit Compass und Sass zu erstellen, das auch jedes einzelne Bild automatisch skaliert, um es mit der Hintergrundgröße zu verwenden.

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

Hat jemand ein funktionierendes Beispiel?

Edit: Das ist, was ich

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

Die mixin kehrt keine Fehler bisher.

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

Ich bekomme die folgende Fehlermeldung von der obigen Implementierung, wenn ich versuche zu kompilieren. Über 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 

Answer 1

Hier ist ein mixin für Sprites Ändern der Größe, die schön

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

arbeitet und die GitHub es herkommt: https://gist.github.com/darren131/3410875

Answer 2

ich auch einige der Forschung zu diesem Thema gemacht haben. Das Wesentliche ist, was ich kam mit: https://gist.github.com/apauly/7917906

Update:

Die Lösung hängt von drei Schlüssel Teilen:

1. Skala Breite
2. Skalenhöhe
3. get background-position

0. Besorgen Sie sich die Dimensionen für beide, die komplette Sprite und das einzelne Symbol:

$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. ein div Betrachten wir ein Sprite als Hintergrund angezeigt wird. Stellen Sie background-size: 100%; ein, um sicherzustellen, dass das Hintergrund-Sprite die gesamte Breite des div-Bereichs abdeckt.

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

So müssen wir unseren Hintergrund vergrößern, so etwas zu bekommen: Wenn man width: 100%; verwenden würde, ist das Ergebnis in etwa so wäre

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

(die div overflow:hidden obwohl haben sollte) Um das zu erreichen, teilen sich nur die Breite des gesamten Sprite durch die Breite des einzelnen Symbol:

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

2. Dieser ist im Wesentlichen durch einen Blog-Post Form tkenny inspiriert: http://inspectelement.com/tutorials/a-responsive-css-background-image-technique/

Der resultierende ist sass Code folgendermaßen aus:

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

3. Der Rest ist nur einige grundlegende mathematische an die Spitze zu berechnen Abstand des Symbols innerhalb des Sprites als relativen Wert:

Holen Sie sich das Leerzeichen von oben in Pixeln (ein negativer Wert):

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

Sass mit Prozent

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

Stellen Sie die Hintergrundposition ein Pixel-Wert benötigen:

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