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. git克隆源码时提示fatal: HTTP request failed怎么办?

    答: 升级git版本即可 centos下升级git的方法在此

  2. Super-palindrome 【可能是暴力】

    Super-palindrome 时间限制: 1 Sec  内存限制: 128 MB 提交: 486  解决: 166 [提交] [状态] [命题人:admin] 题目描述 You are given ...

  3. 网络流24题 P2754 [CTSC1999]家园

    思路 如图,建立分层图跑dinic 每次在残余网络里加边继续跑 跑到ans>=k时候的i就是答案 诶呀啊,忘记弄箭头了,最后一列是向上的箭头,不过聪明的你们应该没啥影响 代码 #include ...

  4. 转载：Systemd 命令

    目录 一.由来 二.Systemd 概述 三.系统管理 3.1 systemctl 3.2 systemd-analyze 3.3 hostnamectl 3.4 localectl 3.5 time ...

  5. 【做题】CFedu41G. Partitions——推式子

    实际上这题的题面还是颇有意思,对两个划分不同的定义暗示了第二类斯特林数,模数是\(1000000007\)又表明这题不是NTT. 那么一开始的想法是考虑每个集合的贡献.设这个集合为\(S\),那么它的 ...

  6. Many Website Of WallPaper

    我在这里给大家推荐几个不错的壁纸网站 毕竟一张赏心悦目的壁纸能让你的工作效率提高不少 注意前方高能 一大波网站即将来袭 一系列 如你所见 alphacoders wallpaperdj Wallhav ...

  7. IE8下面parseInt('08')、parseInt('09')会转成0

    例子: <html> <body> <script type="text/javascript"> for(var i=1;i<=20;i ...

  8. P2517 [HAOI2010]订货

    思路 费用流水题 对每月拆点,入点向出点连cap=ui的边,s向入点连cost=di的边,i的入点向i+1的入点连cap=S的边即可 代码 #include <cstdio> #inclu ...

  9. 51nod 1215 数组的宽度（单调栈）

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1215 题意: 思路: 计算出以第i个数为最大值的区间范围,l_max[i ...

  10. JS相关重点知识 (概况)

    1.value和innerHTML没有联系,只是value是表单的一个特有属性,而innerHTML是通用的. 2.当从外部引入js文件时,该外部文件里面可以有多个方法,   html页面中的oncl ...