Sass 指南针精灵图像和比例
在过去的4个小时里,我一直试图找到一种方法来创建一个带有指南针和sass的sprite图像,它还可以自动缩放每个单独的图像,以便与“背景大小”属性一起使用 我发现什么都不管用,真不敢相信有那么难 有没有人有一个有效的例子 编辑:这是我目前所拥有的Sass 指南针精灵图像和比例,sass,compass-sass,css,Sass,Compass Sass,Css,在过去的4个小时里,我一直试图找到一种方法来创建一个带有指南针和sass的sprite图像,它还可以自动缩放每个单独的图像,以便与“背景大小”属性一起使用 我发现什么都不管用,真不敢相信有那么难 有没有人有一个有效的例子 编辑:这是我目前所拥有的 @mixin resize-sprite($map, $sprite, $percent) { $spritePath: sprite-path($map); $spriteWidth: image-width($spritePath
@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) );
}
@mixin resize-sprite-set($map, $percent, $only...) {
$name: sprite_map_name($map);
@each $sprite in sprite_names($map) {
@if length($only) == 0 or index($only, $sprite) != false {
.#{$name}-#{$sprite} {
@include resize-sprite($map, $sprite, $percent);
}
}
}
}
mixin不返回任何错误
$my-icons-spacing: 10px; // give some space to avoid little pixel size issues on resize
@import "my-icons/*.png";
$my-icons-sprite-dimensions: true;
@include all-my-icons-sprites;
// the fun part
.small-icons { // overriding all sprites
@include resize-sprite-set($my-icons-sprites, 40); // 40% sized
}
.some-part-of-my-site {
@include resize-sprite-set($my-icons-sprites, 40, logo, ok); // will create overrides only for sprites "logo" and "ok"
}
当我尝试编译时,我从上面的实现中得到以下错误消息。通过Prepos应用程序
remove ../images/my-icons-s9e77ab1ef1.png
create ../images/my-icons-s9e77ab1ef1.png
error style.scss (Line 62 of _mixins.scss: Undefined mixin 'resize-sprite-set'.)
identical ../css/style.css
这里有一个用于调整精灵大小的混音器,效果很好
@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) );
}
它来自于github:
我也做了一些这方面的研究。这是我想到的要点: 更新: 解决方案取决于三个关键部分:
$icon-file: sprite-file($map, $icon);
$icon-width: image-width($icon-file);
$icon-height: image-height($icon-file);
$sprite-file: sprite-path($map);
$sprite-width: image-width($sprite-file);
$sprite-height: image-height($sprite-file);
width:percentage($sprite-width / $icon-width);
1.
考虑一个显示精灵作为背景的div。设置<代码>背景大小:100%以确保背景精灵覆盖div的整个宽度。
如果使用宽度:100%代码>,结果如下:
+----------------+
|--| |
|----------------|
|--------| | <--- This is the sprite image we want to display
|------| |
+----------------+
要实现这一点,只需将完整精灵的宽度除以单个图标的宽度:
$icon-file: sprite-file($map, $icon);
$icon-width: image-width($icon-file);
$icon-height: image-height($icon-file);
$sprite-file: sprite-path($map);
$sprite-width: image-width($sprite-file);
$sprite-height: image-height($sprite-file);
width:percentage($sprite-width / $icon-width);
2.
这篇文章的灵感来源于tkenny的一篇博文:
由此产生的sass代码如下:
display: block;
height: 0;
padding-bottom: percentage($icon-height / $icon-width);
background-size: 100%;
3.
剩下的只是一些基本的数学计算,以计算精灵内部图标的顶部间距作为相对值:
$space-top:floor(nth(sprite-position($map, $icon), 2));
以像素为单位从顶部获取空间(负值):
Sass需要一个px值
@if $space-top == 0 {
$space-top: 0px
}
使用百分比设置背景位置:
background-position:0 percentage(
-1 * $space-top / ( $sprite-height - $icon-height )
);
不知道这是否有帮助,但是。也许你可以告诉我们什么不起作用?我添加了我正在使用的代码。