compass Sprites 雪碧图小图片合成[Sass和compass学习笔记]-阿里云开发者社区

compass Sprites 雪碧图小图片合成[Sass和compass学习笔记]

2014-06-05 1427

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： demo 源码地址 https://github.com/qqqzhch/webfans 什么是雪碧图？ CSS雪碧即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

demo 源码地址 https://github.com/qqqzhch/webfans

什么是雪碧图？

CSS雪碧即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

compass 中为我们提供了简洁的工具和方法生成雪碧图

API 在这里 http://compass-style.org/reference/compass/utilities/sprites/

雪碧图只须掌握最简单的方法即可

可以参考这里的API

http://compass-style.org/reference/compass/helpers/sprites/

这里我们主要送这个API

sprite-map($glob, ...)

首先准备几张图片 png 的图片制作雪碧图推荐采用png图片

我们在图片目录下建立Sprites 目录这里放置那些需要合成的小缩略图

然后我们在sass目录下见一个 sass文件，用作制作雪碧图的基本配置

文件前加下划线标志这是个小模块不独立生成css文件

文件内容如下

@import "compass/utilities/sprites";
$sprite-default-margin:10px;
$my-icons-sprite: sprite-map("Sprites/*.png");

首先引入相关的库，然后是个设置每个小图标之间的距离，

最后是声明一个变量$my-icons-sprite 存储图片映射sprite-map的结果

具体如何使用每个小图片呢？

代码如下

@import "compass/reset";
@import '_sprites.scss';
h1 {}

h2 {} 

.mytest {
    width: 200px;
    color: #eee;
}
.mying1{
	width: 300px;
	height: 300px;
	background: sprite($my-icons-sprite,'a11') no-repeat;
}
.mying3{
	width: 300px;
	height: 300px;
	background: sprite($my-icons-sprite,'a33') no-repeat;
}
.mying4{
	width: 300px;
	height: 300px;
	background: sprite($my-icons-sprite,'a4444') no-repeat;
}
.mying5{
	width: 300px;
	height: 300px;
	background: sprite($my-icons-sprite,'a555') no-repeat;
}

background: sprite($my-icons-sprite,'a555') no-repeat; 使用起来还是计较简单的

这个例子生成的 demo如下

test