Jak utworzyć ikonkę z folderu zi bez rozmiaru tła (przy użyciu kompasu)?

Question

Chcę użyć ikonki sprite wygenerowanej przez kompas dla dwóch różnych scenariuszy.

1. Użyj ikon w oryginalnym rozmiarze.
2. Użyj tej samej ikony (ikon) co mniejsza wersja przy użyciu właściwości CSS3 background-size.

raz pierwszy to zrobić:

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

Teraz mogę korzystać z ogólnych utworzonych klas CSS jak .logo-twitter itp

Two osiągnąć drugi wynik mogę użyć tego (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); 
    } 
} 

Ale jeśli mam około 30 logo, będę musiał powtórzyć to ręcznie dla każdej klasy duszków.

Czy można zaimportować folder dwukrotnie, raz dla oryginalnego rozmiaru i po raz drugi z właściwością backround-size? Lub zmodyfikuj wspomnianą metodę, aby automatycznie utworzyć wszystkie klasy w innym numerze <div class="my-other-div-with-small-logos">, gdzie ikony powinny być mniejsze?

A może mam tu zły kierunek?

Answer 1

To robi. To iteracje nad całą mapę:

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

pomógł w ten sposób: Way to iterate over sprites in a map

To wspaniale skalowanie w dół ikonek w nowoczesnych przeglądarkach bez ładowania innego sprite generowanego obrazu. Jeśli logo ma czasami 50 pikseli, ale powinno być również 20 pikseli w innym miejscu, jest to całkowicie w porządku.

Answer 2

Twórz symbole zastępcze dla każdego w pętli, a następnie dołączaj symbole zastępcze tam, gdzie są potrzebne. Na przykład:

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

Należy pamiętać, że zakładając, że wszystkie obrazy powinny zostać zmienione o 40%. Jeśli chcesz określić różne wartości procentowe dla różnych logo, musisz wykonać więcej iteracji kreacji.

Jeszcze lepiej, może po prostu wygenerujesz klasy w pętli?

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

Answer 3

Dziękuję wszystkim za to. To działa! Teraz mam poszła do przodu i rozwijać na nim jak ja potrzebowałem czegoś trochę bardziej dynamiczny, gdzie są zbudowane w oparciu o ikony ico- [size] ico- [obraz] & swatch- [color]

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