バックグラウンドサイズの有無にかかわらずフォルダからスプライトを作成する方法（コンパスを使用）

Question

2つの異なるシナリオでコンパスによって生成されたアイコンスプライトを使用します。

1. 元のサイズのアイコンを使用してください。
2. CSS3のプロパティbackground-sizeを使用して、同じバージョンの小さいアイコンと同じアイコンを使用します。

私が最初にこれを行う：

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

は今、私はこれを使用することができます2番目の結果を達成.logo-twitterなど

二つのような（darren131/gist:3410875 - resize sprites in Compass）を一般的な作成CSS-クラスを使用することができます。

を

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

私は約30のロゴがある場合、私はこれを手動で各スプライトクラスごとに繰り返す必要があります。

backround-sizeプロパティで元のサイズと2回、フォルダを2回インポートすることはできますか？ アイコンを小さく表示する別の<div class="my-other-div-with-small-logos">内のすべてのクラスを自動的に作成するには、上記の方法を変更しますか？

ここで間違った方向に考えていますか？

Answer 1

そうです。

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

これは助け：Way to iterate over sprites in a map

それは別の生成スプライト画像をロードすることなく、現代のブラウザでスプライトを縮小するために素晴らしいことだそれはマップ全体を反復処理しました。ロゴが50px、20pxになることもありますが、これは問題ありません。

Answer 2

ループ内でそれぞれのプレースホルダを作成し、必要に応じてプレースホルダを追加します。例：

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

ここでは、すべての画像のサイズを40％に変更する必要があることに注意してください。異なるロゴに異なる割合を指定する必要がある場合は、より創造的な反復処理を行う必要があります。

さらに、ループ内にクラスを生成するだけでもいいですか？

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

Answer 3

ありがとうございます。できます！さて、私は先に行って、私はアイコンがico- [サイズ]に基づいて構築されている場合、もう少しダイナミックな何かico- [画像] & swatch- [カラー]

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