Как создать спрайт из папки с фоновым размером и без него (с помощью Compass)

Я хочу использовать созданный Компасом значок-спрайт для двух разных сценариев.

Используйте значок (ы) в оригинальном размере.Используйте те же значки, что и уменьшенную версию, используя свойство CSS3.background-size

Сначала я делаю это:

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

Теперь я могу использовать общие созданные CSS-классы вроде.logo-twitter и т.п.

Два достижения второго результата я мог бы использовать это (darren131 / gist: 3410875 - изменение размера спрайтов в компасе):

@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 имущество? Или измените упомянутый метод, чтобы автоматически создавать все классы внутри другого где значки должны появляться поменьше?

Или я здесь не в том направлении?

Ответы на вопрос(3)

Ваш ответ на вопрос