小松的技术博客

六和敬

若今生迷局深陷,射影含沙。便许你来世袖手天下,一幕繁华。 你可愿转身落座,掌间朱砂,共我温酒煮茶。

利用Compass相关接口制作自定义类名的Sprite

也许大家都知道可以利用Compass可以制作出雪碧图,但是利用一般的教程制作出来的雪碧图是收到了很大的限制的,特别是在其命名上,让人特别不爽。在深入了解了compass后,发现其是提供了很多很好的接口的,我们可以很方便的调用这些接口来制作自己想做的雪碧图。

需求

我想要的效果为:

  1. 一个.icon基类,用来作为背景图片的容器,然后再用.icon_PicName形式的类来定位其位置,适当时候也要定义其大小。

  2. 可以适配2倍图、3倍图这些情况

相关接口

sprite-map:用来获取图片

sprite-names:获取雪碧图中的图片数组

sprite-url:用于获取雪碧图的url路径,其结果是带有url标识的,可直接用于background-image

sprite-path:获取雪碧图的路径

image-width:获取图片的宽度

image-height:获取图片的高度

sprite-position:用于获取雪碧图中具体图标的位置

ImageDirName-sprite-width:用于获取雪碧图中具体图片的宽度

ImageDirName-sprite-height:用于获取雪碧图中具体图片的高度,下同

备注:

ImageDirName代表所放图片的文件夹名,并且这个文件放在了images(compass配置的图片目录)目录下。

相关接口的参数及详细解释请查阅官方文档

代码实现

//用于获取图片(ImageDirName@2x用于放2倍图的文件夹名)
$icons: sprite-map("ImageDirName/*.png",$spacing:5px,$layout:vertical);
$icons-2x: sprite-map("ImageDirName@2x/*.png",$spacing:10px,$layout:vertical);

//定义每个图标的一般性大小,不同于这个大小图标特殊处理
$icon_width_default:40px;
$icon_height_default:40px;

//.icon样式
.icon{
    background-image:sprite-url($icons);
    background-size: image-width(sprite-path($icons)) image-height(sprite-path($icons));
    width:$icon_width_default;
    height:$icon_height_default;
}

//.icon_PicName样式
@each $item in sprite-names($icons) {
    //获取对应图标的真实大小
    $height:ImageDirName-sprite-height(#{$item});
    $width:ImageDirName-sprite-width(#{$item});
    .icon_#{$item}{
        background-position: sprite-position($icons,#{$item});
        @if $width != $icon_width_default{
            width:$width;
        }
        @if $height != $icon_height_default{
            height:$height;
        }
    }
}
@media only screen and (min-device-pixel-ratio: 2){
    .icon{
        background-image:sprite-url($icons-2x);
    }
}
←支付宝← →微信 →
comments powered by Disqus