如何从有和没有背景大小的文件夹创建精灵（使用指南针） [英] How to create a sprite from a folder with and without background-size (using Compass)

问题描述

我想为两种不同的场景使用Compass生成的icon-sprite。

1. 使用原始大小的图标。


2. 使用与使用CSS3属性 background-size 的较小版本相同的图标。

我首先这样做：

  $ logo-spacing： 20px; 
 @importlogo / *。png; 
 @include all-logo-sprites; 
  

现在我可以使用一般创建的CSS类，如 .logo-twitter

两个实现第二个结果我可以使用这个（ darren131 / gist：3410875 - resize sprites in Compass ）：

  @mixin resize-sprite ，$ 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 属性？
或修改所提到的方法以在另一个< div class =my-other-div-with-small-logos> 中自动创建所有类

解决方案

/ div>

就是这样。它遍历整个映射：

  @each $ sprite in sprite_names（$ logo-sprites）{
 .logo - ＃{$ sprite} {
 @include resize-sprite（$ logo-sprites，$ sprite，40）; 
} 
} 
  

这有助于：在地图中迭代精灵的方法

这是伟大的缩放在现代浏览器中没有加载另一个生成的精灵图像。如果标志有时是50像素，但在其他地方也应该是20像素，这是非常好的。

I want to use a Compass generated icon-sprite for two different scenarios.

1. Use the icon(s) in original size.
2. Use it the same icon(s) as a smaller version using CSS3 property background-size.

I first do this:

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

Now I can use the general created CSS-classes like .logo-twitter etc.

Two achieve the second result I could use this (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);
    }
}

But if I have around 30 logos I would need to repeat this manually for each sprite-class.

Is it possible to import the folder twice, once for the original size and a second time with the backround-size property? Or modify the mentioned method to create all classes automatically within another <div class="my-other-div-with-small-logos"> where the icons should appear smaller?

Or am I thinking in the wrong direction here?

解决方案

That does it. It iterates over the whole map:

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

This helped: Way to iterate over sprites in a map

It's great to scale down sprites in modern Browsers without loading another generated sprite-image. If the logos sometimes are 50px, but should also be 20px somewhere else, this is perfectly fine.

这篇关于如何从有和没有背景大小的文件夹创建精灵（使用指南针）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！