首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >compass生成基于rem的图片精灵

compass生成基于rem的图片精灵

作者头像
前端GoGoGo
发布2018-08-27 10:13:34
4910
发布2018-08-27 10:13:34
举报

compass来做基于px单位的图片精灵很简单,具体见这里

基于rem做图片精灵有些麻烦,思路是

  1. 图片精灵的那张图片的background-size使用rem
  2. background-position也使用rem

具体实现如下 1 我们需要用到compass提供的一些操作图片精灵的api,所以需要引入相应的包

@import "compass/utilities/sprites";

2 获取图片精灵对象

$sprites:sprite-map("图片文件夹/*.png", $spacing:10px, $layout: vertical);

上面的代码,将图片文件夹下所以的png图片生成一张图片精灵,并且图片间的间距为10px,垂直放置。关于这api的详细描述见这里

3 下面介绍下获取图片精灵的一些信息api

sprite-width($sprites) ;// 图片精灵的宽
sprite-height($sprites); // 图片精灵的宽
sprite-url($sprites); //图片精灵的路径
sprite-position($sprites, $name); //某张图片在图片精灵中的位置。可以直接作为background-position的值。
nth(sprite-position($sprites, $name), 1) ;//某张图片在图片精灵中的x的位置
nth(sprite-position($sprites, $name), 2) ;//某张图片在图片精灵中的y的位置
image-width(sprite-file($sprites, $name));//某张图片的宽
image-height(sprite-file($sprites, $name));//某张图片的高

上面的$sprites是第二步中获取的图片精灵对象

4 px转化成rem以及一些工具方法

$divide: 10;
$ppr: 640px/$divide/1rem;
$pprVal: 640/10;

// 去单位
@function strip-units($number) {
    @return $number / ($number * 0 + 1);
}

// 将值转化成以rem为单位的
@function addRemUnit($val, $unit: px) {
    @if $val !=0 {
        $val: $val/$pprVal;
        $val: $val + rem;
    }
    @return $val;
}

5 生成某张图片的样式

@mixin rem-sprite($sprites, $name) {
    background-repeat: no-repeat;
    background-image: sprite-url($sprites); //雪碧图路径
    background-position: addRemUnit(strip-units(nth(sprite-position($sprites, $name), 1))) addRemUnit(strip-units(nth(sprite-position($sprites, $name), 2)));
    background-size: sprite-width($sprites)/$ppr sprite-height($sprites)/$ppr;
}

6 有时候,我们需要将背景图的位置做一些调整

//$offset-x的正值向右移,$offset-y的正值向下移
@mixin rem-sprite-pos($sprites, $name, $offset-x: 0, $offset-y: 0) {
    background-position: addRemUnit(strip-units(nth(sprite-position($sprites, $name), 1)) + $offset-x) addRemUnit(strip-units(nth(sprite-position($sprites, $name), 2)) + $offset-y);
}

7 有时候,我们需要设置元素的大小

@mixin rem-sprite-size($sprites, $name) {
    height: image-width(sprite-file($sprites, $name))/$ppr; //目标图片高度
    width: image-height(sprite-file($sprites, $name))/$ppr; //目标图片宽度
}

8 调用

.icon-图片名称{
        @include rem-sprite($sprites, 图片名称);
        @include rem-sprite-size($sprites,图片名称); //可选
       @include rem-sprite-pos($sprites,图片名称, 10, (64-48)/2);//可选
}

完整代码如下

@import "compass/utilities/sprites";
// api 见 http://compass-style.org/reference/compass/helpers/sprites/#sprite-map
$sprites:sprite-map("图片文件夹/*.png", $spacing:10px, $layout: vertical);
$divide: 10;
$ppr: 640px/$divide/1rem;
$pprVal: 640/10;
// 去单位
@function strip-units($number) {
    @return $number / ($number * 0 + 1);
}

@function addRemUnit($val, $unit: px) {
    @if $val !=0 {
        $val: $val/$pprVal;
        $val: $val + rem;
    }
    @return $val;
}


// 将图片精灵的图片大小和位置进行缩放。实现方式通过把单位由px变成rem
@mixin rem-sprite($sprites, $name) {
    background-repeat: no-repeat;
    background-image: sprite-url($sprites); //雪碧图路径
    background-position: addRemUnit(strip-units(nth(sprite-position($sprites, $name), 1))) addRemUnit(strip-units(nth(sprite-position($sprites, $name), 2)));
    background-size: sprite-width($sprites)/$ppr sprite-height($sprites)/$ppr;
}

@mixin rem-sprite-size($sprites, $name) {
    height: image-width(sprite-file($sprites, $name))/$ppr; //目标图片高度
    width: image-height(sprite-file($sprites, $name))/$ppr; //目标图片宽度
}

//$offset-x的正值向右移,$offset-y的正值向下移
@mixin rem-sprite-pos($sprites, $name, $offset-x: 0, $offset-y: 0) {
    background-position: addRemUnit(strip-units(nth(sprite-position($sprites, $name), 1)) + $offset-x) addRemUnit(strip-units(nth(sprite-position($sprites, $name), 2)) + $offset-y);
}

.icon-图片名称{
        @include rem-sprite($sprites, 图片名称);
        @include rem-sprite-size($sprites,图片名称);
       @include rem-sprite-pos($sprites,图片名称, 10, (64-48)/2);
}

参考

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015.05.26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 参考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档