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. Oracle常用函数——TO_DATE

    TO_DATE 含义:将具有固定格式的字符串类型的数据转化为相对应的Date类型数据,官网解释如下图   使用方法 TO_DATE("需要转换的字符串","日期格式&qu ...

  2. POJ 3041 Asteroids（最小点覆盖）题解

    题意:n*n的网格中有k个点,开一枪能摧毁一行或一列的所有点,问最少开几枪 思路:我们把网格看成两个集合,行集合和列集合,如果有点x,y那么就连接x->y,所以我们只要做最小点覆盖就好了. 参考 ...

  3. HDU 5852 Intersection is not allowed!（LGV定理行列式求组合数）题解

    题意:有K个棋子在一个大小为N×N的棋盘.一开始,它们都在棋盘的顶端,它们起始的位置是 (1,a1),(1,a2),...,(1,ak) ,它们的目的地是 (n,b1),(n,b2),...,(n,b ...

  4. [午间休息] - 午间codewars活跃脑袋

    https://www.codewars.com/kata/51f2b4448cadf20ed0000386/javascript 中午是一个易困的时间段.如果其它人不睡觉还好. 这个js题目就是说如 ...

  5. Codeforces 808G Anthem of Berland（KMP+基础DP）

    题意 给定一个字符串 \(s\) ,一个字符串 \(t\) ,其中 \(s\) 包含小写字母和 "?" ,\(t\) 只包含小写字母,现在把 \(s\) 中的问号替换成任意的小写字 ...

  6. WijmoJS 使用Web Workers技术，让前端 PDF 导出效率更高效

    概述 Web Workers是一种Web标准技术,允许在后台线程中执行脚本处理. WijmoJS 的2018v3版本引入了Web Workers技术,以便在生成PDF时提高应用程序的运行速度. 一般来 ...

  7. docker 命令随笔

    如果是容器传输文件到本地的话,反过来就好了: docker cp  ID全称:容器文件路径   本地路径 2.进入docker 容器 docker exec -it fw-pay-trade-serv ...

  8. 【NOI 2016】优秀的拆分

    Problem Description 如果一个字符串可以被拆分为 \(AABB\) 的形式,其中 \(A\) 和 \(B\) 是任意非空字符串,则我们称该字符串的这种拆分是优秀的. 例如,对于字符串 ...

  9. 一、python （int & str 的方法）

    1.变量:命名与使用 #!/usr/bin/env/ python # -*- coding:utf-8 -*- name = 'liQM' 只能包含字母.数字或下划线: 第一个字符不能是数字: 简短 ...

  10. js之鼠标随动后面跟随事件(类似于长龙跟着跑)

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...