compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]
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学习笔记]的更多相关文章
- compass做雪碧图
由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when dep ...
- 使用Compass制作雪碧图
遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...
- 使用sass与compass合并雪碧图(一)
雪碧图就是很多张小图片合并成一张大图片,以减少HTTP请求,从而提升加载速度.有很多软件可以合并雪碧图,但通常不太容易维护,使用compass生成雪碧图应该算是非常方便的方法了,可以轻松的生成雪碧图, ...
- 使用sass与compass合并雪碧图(二)
上一篇文章介绍了怎样使用compass合并雪碧图,生成的icons.css文件中单位是px,PC端可以直接在html文件中使用,但在移动端,我们需要根据不同分辨率的屏幕,来缩放图片大小,显然使用px单 ...
- 利用compass制作雪碧图
compass是什么?是sass一款神奇插件,具体教程,我还是推荐阮一峰sass,compass教程,简单清晰明了. 用ps制作雪碧图,工作效率太低了.用compass来制作,方便很多.下图的用com ...
- Sass和Compass制作雪碧图
1.安装好了sass与compass之后设置一个配置文件 2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹 3.@import命令引用 .Compass看到@import指令的参数为 ...
- CSS Sprites ——雪碧图的使用方法
首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...
- compass与css sprite(雪碧图)
什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链 ...
- sass制作雪碧图
1.配置文件config.rb http_path = "../../../" css_dir = "Content/css" sass_dir = " ...
随机推荐
- iis搭建FTP服务器
win7下如何开启iis请参考前一篇 使用iis并搭建 iis 图片服务器 ftp登陆格式 : ftp://[帐号]:[密码]@[IP]:[端口] ftp://用户名:密码@FTP服务器IP或域名: ...
- mysql中event的用法详解
一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...
- [NHibernate]O/R Mapping基础
系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) 引言 对象和关系数据库 ...
- 【09-23】js原型继承学习笔记
js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...
- 跟随 Web 标准探究DOM -- Node 与 Element 的遍历
写在前面 这篇没有什么 WebKit 代码的分析,因为……没啥好分析的,在实现里无非就是树的(先序DFS)遍历而已,囧哈哈哈……在WebCore/dom/Node.h , WebCore/dom/Co ...
- VTK初学一,比较常见的错误2
我的开发环境: 系统:win8.1 QT:5.4.2MinGW版 VTK:6.3 按照教程生成一个球体显示在,Qt的QVTKWidget控件中,出现如下ERROR: ERROR: In D:\VTK6 ...
- css3多列样式
- 个性化设置phpMyAdmin,去掉“以树形显示数据库”,禁用“发送错误报告”
个性化设置phpMyAdmin 在使用phpMyAdmin 3.5.8.2时,发现: 如果数据库有相同的前缀,左边数据库导航会把前缀合并,即所谓的“以树形显示数据库”,真的有点不习惯,如下图所示: 不 ...
- PHP通用分页(Pager)类
三种不同展示方式 附上style~ 1. 效果图1 2.效果图2 3. 效果图3 4. 分页类主体 <?php /** * PHP通用分页类 * show(2) 1 ... 62 63 6 ...
- Memcached集群/分布式/高可用 及 Magent缓存代理搭建过程 详解
当网站访问量达到一定时,如何做Memcached集群,又如何高可用,是接下来要讨论的问题. 有这么一段文字来描述“Memcached集群” Memcached如何处理容错的? 不处理!:) 在memc ...