本文介绍了如何从有和没有背景大小的文件夹创建精灵(使用指南针)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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


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

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

我首先这样做:

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

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



两个实现第二个结果我可以使用这个():

  @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.

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

09-06 04:35