1.安装好了sass与compass之后设置一个配置文件

2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹

3.@import命令引用 。Compass看到@import指令的参数为*.png时,它会假定将这个目录下的所有.png图片制作成一张雪碧图

你也可以通过一定的规则让它按照自己需要的图片以及排版来生成相应的雪碧图,设置如下:

第一个框框里面的设置是把所有color文件夹下的图片合成一张大图,同事会编译出对应的css文件。

第二个框框里面的设置是把color文件夹下的图片按需合成一张大图。

4.执行命令后compass watch 开始生成雪碧图

结果如下:

根据自己的需要把对应的css拿过去使用。

线上效果:

http://dongxuec3xr.e-horse.cn/

参考链接http://www.w3cplus.com/preprocessor/intermediate/spriting-with-sass-and-compass.html

Sass和Compass制作雪碧图的更多相关文章

  1. 使用Compass制作雪碧图

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

  2. 利用compass制作雪碧图

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

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

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

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

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

  5. compass做雪碧图

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

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

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

  7. sass制作雪碧图

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

  8. Photoshop制作雪碧图技巧

    雪碧图,就是将网页制作中使用的多个小图片合并成一个图片,使用css技术将这张合成的图片应用在网页不同的地方. 雪碧图可以减少网页加载时的http请求数,优化网页性能. 步骤: a.使用Photosho ...

  9. gulp 制作雪碧图

    雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任 ...

随机推荐

  1. FZU2218 Simple String Problem(状压DP)

    首先,定义S,表示前k个字符出现的集合,用二进制来压缩. 接下来,推出dp1[S],表示集合为S的子串的最长长度. 然后根据dp1[S]再推出dp2[S],表示集合为S或S的子集的子串的最长长度. 最 ...

  2. 从Apache Storm学到的经验教训 —— storm的由来(转)

    阅读目录 Storm来源 初探 再探 构建第一个版本 被Twitter收购 开源的Storm 发布之后 Storm的技术演进 构建开发者社区版 离开Twitter 提交到Apache Apache孵化 ...

  3. C#泛类型链表的实现

    使用泛型LinkedList<T>类.下面的方法创建了一个LinkedList<T>类,并往链表对象中添加节点,然后使用了几种方法从链表节点中获得信息.       publi ...

  4. iOS移动开发周报-第23期

    iOS移动开发周报-第23期 [摘要]:本期iOS移动开发周报带来如下内容:苹果发出9月9日发布会邀请函,AFNetworking2.0源码解析,objc与鸭子对象,Protecting iOS Ap ...

  5. SQL Server 收缩数据库

    //删除大量数据 /*** * * BEGIN TRANSACTION; * SELECT * INTO #keep FROM Original WHERE CreateDate > '2011 ...

  6. Bootstrap - 全局css样式类

    状态类 通过这些状态类可以为行或单元格设置颜色. .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning ...

  7. java 处理xml格式数据

    1.单个xml文件 package lia.meetlucene; import java.io.*; import javax.xml.parsers.DocumentBuilder; import ...

  8. Samba结合AD实现域帐号认证的文件服务器

    准备一台Windows域控制器, 在Samba服务器上安装Webmin图形化管理工具, samba, krb5-user, winbind. 修改/etc/krb5.conf. [logging] d ...

  9. Radeon HD 7850 vs Radeon R9 270X

    Radeon HD 7850 vs Radeon R9 270X  HW compare   Intro The Radeon HD 7850 comes with a GPU core speed ...

  10. Javascript 笔记与总结(1-2)词法分析

    词法分析,按顺序分析 3 样: 第 1 步:先分析参数 第 2 步:再分析变量声明 第 3 步:再分析函数声明 一个函数能使用的局部变量,就从上面 3 步分析而来. 具体步骤: 0:函数运行前的瞬间, ...