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目录下的图片以下:

来看一下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，可是其实这远远不够，实际运用中咱们还会遇到一些麻烦。例如说我想要实现以下效果

理想中的解决方案是

<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>

并且最后的结果是这样的

能够看到不但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;
}

嗯 如今就能够光明正大的偷懒不用本身作雪碧图了