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

compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]的更多相关文章

  1. compass做雪碧图

    由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when dep ...

  2. 使用Compass制作雪碧图

    遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...

  3. 使用sass与compass合并雪碧图(一)

    雪碧图就是很多张小图片合并成一张大图片,以减少HTTP请求,从而提升加载速度.有很多软件可以合并雪碧图,但通常不太容易维护,使用compass生成雪碧图应该算是非常方便的方法了,可以轻松的生成雪碧图, ...

  4. 使用sass与compass合并雪碧图(二)

    上一篇文章介绍了怎样使用compass合并雪碧图,生成的icons.css文件中单位是px,PC端可以直接在html文件中使用,但在移动端,我们需要根据不同分辨率的屏幕,来缩放图片大小,显然使用px单 ...

  5. 利用compass制作雪碧图

    compass是什么?是sass一款神奇插件,具体教程,我还是推荐阮一峰sass,compass教程,简单清晰明了. 用ps制作雪碧图,工作效率太低了.用compass来制作,方便很多.下图的用com ...

  6. Sass和Compass制作雪碧图

    1.安装好了sass与compass之后设置一个配置文件 2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹 3.@import命令引用 .Compass看到@import指令的参数为 ...

  7. CSS Sprites ——雪碧图的使用方法

    首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...

  8. compass与css sprite(雪碧图)

    什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链 ...

  9. sass制作雪碧图

    1.配置文件config.rb http_path = "../../../" css_dir = "Content/css" sass_dir = " ...

随机推荐

  1. iis搭建FTP服务器

    win7下如何开启iis请参考前一篇 使用iis并搭建 iis 图片服务器 ftp登陆格式  : ftp://[帐号]:[密码]@[IP]:[端口] ftp://用户名:密码@FTP服务器IP或域名: ...

  2. mysql中event的用法详解

    一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...

  3. [NHibernate]O/R Mapping基础

    系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) 引言 对象和关系数据库 ...

  4. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  5. 跟随 Web 标准探究DOM -- Node 与 Element 的遍历

    写在前面 这篇没有什么 WebKit 代码的分析,因为……没啥好分析的,在实现里无非就是树的(先序DFS)遍历而已,囧哈哈哈……在WebCore/dom/Node.h , WebCore/dom/Co ...

  6. VTK初学一,比较常见的错误2

    我的开发环境: 系统:win8.1 QT:5.4.2MinGW版 VTK:6.3 按照教程生成一个球体显示在,Qt的QVTKWidget控件中,出现如下ERROR: ERROR: In D:\VTK6 ...

  7. css3多列样式

  8. 个性化设置phpMyAdmin,去掉“以树形显示数据库”,禁用“发送错误报告”

    个性化设置phpMyAdmin 在使用phpMyAdmin 3.5.8.2时,发现: 如果数据库有相同的前缀,左边数据库导航会把前缀合并,即所谓的“以树形显示数据库”,真的有点不习惯,如下图所示: 不 ...

  9. PHP通用分页(Pager)类

    三种不同展示方式 附上style~ 1. 效果图1 2.效果图2    3. 效果图3 4. 分页类主体 <?php /** * PHP通用分页类 * show(2) 1 ... 62 63 6 ...

  10. Memcached集群/分布式/高可用 及 Magent缓存代理搭建过程 详解

    当网站访问量达到一定时,如何做Memcached集群,又如何高可用,是接下来要讨论的问题. 有这么一段文字来描述“Memcached集群” Memcached如何处理容错的? 不处理!:) 在memc ...