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. topcoder srm 700 div1 -3

    1.有$n$个人,编号1到$n$.将其平均分到$m$个房间中,每个房间$K$个人.现在知道每个房间编号最小的人的编号.对于给出的人$x$.问其可能在的房间有多少种? 思路:先假设其在某个房间,然后判断 ...

  2. Spring 学习——Spring框架结构、概念

    maven项目结构 记忆:在一个项目中,project下一层级时src,也就是源文件,所有需要进行编译的文件都是在这个目录下,其实也就是这一个目录,然后向下扩展.在src目录下,存在main文件夹,里 ...

  3. String,InputStream相互转换

    一. InputStream转换为String 转换的过程是: 使用FileInputStream读取文件流: 使用InputStreamReader读取FileInputStream流: 使用Buf ...

  4. oracle数据库的一个表中,怎么设置字段的默认值

    如果表已经存在,用如下方法设置默认值. alter table 表名 modify 字段名 default 默认值; 如test表中设置address字段为'浙江省',可用如下语句: alter ta ...

  5. Python3 tkinter基础 Frame bind 捕捉多键同时按

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

  6. Python入门 值内存管理与所有的关键字

    值内存管理 Python采用的是基于值得内存管理方式,如果为不同变量赋值为相同值,这个值在内存中只有一份,多个变量指向同一块内存地址. id(x) : 用于返回变量所指值的内存地址 x = 3 pri ...

  7. P3521 [POI2011]ROT-Tree Rotations

    思路 发现每个子树内的交换情况不会对子树外造成影响,所以可以利用贪心的思想,线段树合并找出当前子树的合并的最小值直接累加给答案即可 我脑补的线段树合并貌似不太优秀的样子...每次都要新建节点,学习了直 ...

  8. ComponentOne 2017 V1 发布

    在刚刚庆祝完Visual Studio20周年之后,我们迎来了ComponentOne 2017年第一个重要的版本. ComponentOne Studio与Visual Studio 2017配合发 ...

  9. 如何让浏览器不解析html?

    原问题: 在页面中,除了xmp,textarea以及js转义外,还有什么办法可以让html标签在不被浏览器解析而正常显示呢? 答: 要符合“内部的html标签不被解析”,我们根据HTML5的标准,分元 ...

  10. HDU 5445 Food Problem(多重背包+二进制优化)

    http://acm.hdu.edu.cn/showproblem.php?pid=5445 题意:现在你要为运动会提供食物,总共需要提供P能量的食物,现在有n种食物,每种食物能提供 t 能量,体积为 ...