1、配置文件config.rb

http_path = "../../../"

css_dir = "Content/css"

sass_dir = "Content/sass"

images_dir = "Content/images"

#css_dir = "Components/Table"

#sass_dir = "Components/Table"

#images_dir = "Components/Table"

javascripts_dir = "Scripts"

http_path + images_dir为生成雪碧图的地址

2、在对应的sass文件中

//生成雪碧图

$images-spacing:

$images-clean-up: true

// 加载compass sprites模块

@import "compass/utilities/sprites"

// 导入icon目录下所有png图片

@import "icon/*.png"

// 输出所有的雪碧图css

@include all-icon-sprites

直接设定images_dir下的文件夹所有的png图片

3、单个sass样式的

.hex-iconAdd

  @include icon-sprite("add_w")
add_w是图片名， icon-sprite这单词不加s

4、生成的css

sass制作雪碧图的更多相关文章

  1. 使用Compass制作雪碧图

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

  2. 利用compass制作雪碧图

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

  3. Sass和Compass制作雪碧图

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

  4. Photoshop制作雪碧图技巧

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

  5. gulp 制作雪碧图

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

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

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

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

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

  8. compass做雪碧图

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

  9. compass与css sprite（雪碧图）

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

随机推荐

  1. Logger级别和输出的地方

    转载自http://blog.csdn.net/u014756827/article/details/52475990 log4j日志配置 关键字: apache log4j 1.配置根Logger: ...

  2. Python3基础 frozenset 使用list创建frozenset

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  3. linux下如何调试Makefile?

    答:make --debug=all (输出所有的调试信息)

  4. php的缓冲/缓存 js对象 ，php编程的深入思考-1

    proto- 表示前缀, 表示"原始的, 主要的, 原型的, 最初的. 所以 prototype: 是原型的意思. webserver服务器apach, 的角色,就像一个 仓库/仓库保管员而 ...

  5. P4238 【模板】多项式求逆

    思路 多项式求逆就是对于一个多项式\(A(x)\),求一个多项式\(B(x)\),使得\(A(x)B(x) \equiv 1 \ (mod x^n)\) 假设现在多项式只有一项,显然\(B(x)\)的 ...

  6. 题解——洛谷P2294 [HNOI2005]狡猾的商人（差分约束）

    裸的差分约束 dfs判断负环,如果有负环就false,否则就是true 注意有多组数据,数组要清空 #include <cstdio> #include <algorithm> ...

  7. 论文阅读：Videos as Space-Time Region Graphs

    Videos as Space-Time Region Graphs ECCV 2018 Xiaolong Wang 2018-08-03 11:16:01 Paper:arXiv 本文利用视频中时空 ...

  8. 论文笔记之 SST: Single-Stream Temporal Action Proposals

    SST: Single-Stream Temporal Action Proposals 2017-06-11 14:28:00 本文提出一种 时间维度上的 proposal 方法,进行行为的识别.本 ...

  9. Tomcat日志系统详解

    综合:Tomcat下相关的日志文件 Cataline引擎的日志文件,文件名catalina.日期.log Tomcat下内部代码丢出的日志,文件名localhost.日期.log(jsp页面内部错误的 ...

  10. Jmeter 二次开发 将CSV Data Set Config添加从哪一行开始读数据

    经常遇到性能测试的时候,有100万条数据,才用了5万条,中途因为某些原因停止了,继续用的时候, 要么要清除DB中数据,要么要清除数据源中的数据, 觉得特别麻烦, 希望改写下代码,将 Ignore fi ...