6

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

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

私は最初にこれを行います：

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

これで、作成された一般的な CSS クラス.logo-twitterなどを使用できるようになりました。

2 つは、これを使用できる 2 番目の結果を達成します ( darren131 / gist:3410875 - 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);
    }
}

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

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

それとも、ここで間違った方向に考えていますか?

4

3 に答える 3

4

それはそれを行います。マップ全体を反復します。

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

これは役に立ちました:マップ内のスプライトを反復処理する方法

別の生成されたスプライト イメージをロードせずに、最新のブラウザーでスプライトを縮小できるのは素晴らしいことです。ロゴが 50 ピクセルの場合もあれば、別の場所では 20 ピクセルにする必要がある場合でも、これで問題ありません。

于 2013-01-11T04:25:46.157 に答える
3

Thank you all for this. It works! Now, i have gone ahead and expand on it as i needed something a little more dynamic where icons are constructed based on ico-[size] ico-[image] & 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);
  }
}
于 2013-08-22T21:50:39.820 に答える
1

ループ内のそれぞれにプレースホルダーを作成し、必要な場所にプレースホルダーを含めます。例えば：

@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);
    }
  }
}
于 2013-01-05T22:09:55.087 に答える