我想将指南针生成的图标精灵用于两种不同的场景。
- 使用原始大小的图标。
- 使用 CSS3 属性使用与较小版本相同的图标
background-size
.
我首先这样做:
$logo-spacing: 20px;
@import "logo/*.png";
@include all-logo-sprites;
现在我可以使用一般创建的 CSS 类,例如.logo-twitter
etc.
两个实现了第二个结果我可以使用这个(darren131 /要点:3410875 - 在指南针中调整精灵大小 https://gist.github.com/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
财产?
或者修改上述方法以在另一个方法中自动创建所有类<div class="my-other-div-with-small-logos">
哪里的图标应该显得更小?
或者我在这里思考的方向是错误的?
就可以了。它迭代整个地图:
@each $sprite in sprite_names($logo-sprites) {
.logo-#{$sprite} {
@include resize-sprite($logo-sprites, $sprite, 40);
}
}
这有助于:迭代地图中精灵的方法 https://github.com/chriseppstein/compass/issues/1046
在现代浏览器中缩小精灵而不加载另一个生成的精灵图像是很棒的。如果徽标有时是 50 像素,但在其他地方也应该是 20 像素,这完全没问题。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)