Compass sprite功能详解-优快云博客

Compass sprite简介

sprite（雪碧图），是指将多张icon小图标拼凑成一张大图，以减少http请求的技术，实现方法大体就是先再PS里面把多张图拼一下，然后再在css中用background-position进行定位，显而易见这种方法非常的繁琐，PS的过程非常麻烦而且写css的过程也很烦人，尤其是需要修改的时候简直痛不欲生，而Compass将这一切都自动化，大大减少了我们的工作.

PS:本文假设您已经安装了SASS和compass

新建个sprite.ssass

@import "icons/*.png"
@include all-s-sprites

@import “icons/*.png”：引入s目录下的所有png图片，s是目录名，相当于命名空间，在compass称之为 map，非常重要。

@include all-icons-sprites：生成sprite css代码

那么这个时候您的s目录下的所有Png文件都已经被合并成了一张雪碧图。假设我的icons目录下的图片如下:

icon

来看一下sprite.css的部分内容

.icons-sprite, .icons-bus, .icons-car, .icons-edit-portrait, .icons-exifdown, .icons-eye, .icons-home, .icons-hot, .icons-jinghua, .icons-leftyinhao, .icons-level, .icons-liuyan, .icons-more, .icons-person, .icons-phone, .icons-quguo, .icons-rightyinhao, .icons-sanjiao, .icons-search, .icons-searchtxt, .icons-tel, .icons-video, .icons-weizhi, .icons-write, .icons-yjzan, .icons-zan, .icons-zhuti {
  background-image: url('/statics/images/icons-sa8cd0a64a6.png');
  background-repeat: no-repeat;
}

.icons-bus {
  background-position: 0 0;
}


.icons-car {
  background-position: 0 -44px;
}


.icons-edit-portrait {
  background-position: 0 -88px;
}

可以看到Compass已经自动帮我们算好了position，但是其实这远远不够，实际运用中我们还会遇到一些麻烦。例如说我想要实现如下效果

示例1

理想中的解决方案是

<p class='homelink'>官网</p>

.homelink{
    background:url(homelink.png) no-repeat scroll left center;
    padding-left:30px;
}

可如果照之前compass给出的功能我们只能

<p><span classs='icons-homelink'></span>官网</p>

而且最后的结果是这样的

示例2

可以看到不但HTML多出了冗余，而且实现效果还没有达到我们的预期、

解决方案

我们可以不引入@include all-s-sprites这一句，不让Compass自动的帮我们生成类名，而是使用Compass中的函数，手动的生成样式。首先我们需要定义一个变量来对应我们的sprite图。

$sprite: sprite-map("icons/*.png", $spacing: 50px);

sprite-map是Compass的内置函数，$spacing是指生成的雪碧图中每个元素的间隔。

使用方法:

$left:0;
$top:16px;
.homelink{
    bakcground:sprite($sprite,homelink,$left,$top) no-repeat;
    padding-left:30px;
}

这里的$left和$top就是指你需要在Compass生成后的position里面增加的偏移量。

编译后生成的代码:

.homelink{
    background: url('/statics/images/icons-s82c207cac2.png') 0 -319px no-repeat;
    padding-left: 30px;
}

如果将$top的值修改为0，那么将生成如下代码:

.homelink{
    background: url('/statics/images/icons-s82c207cac2.png') 0 -335px no-repeat;
    padding-left: 30px;
}

嗯现在就可以光明正大的偷懒不用自己做雪碧图了

转载于:https://www.cnblogs.com/RenShine/p/4128611.html