sass制作雪碧图
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制作雪碧图的更多相关文章
- 使用Compass制作雪碧图
遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...
- 利用compass制作雪碧图
compass是什么?是sass一款神奇插件,具体教程,我还是推荐阮一峰sass,compass教程,简单清晰明了. 用ps制作雪碧图,工作效率太低了.用compass来制作,方便很多.下图的用com ...
- Sass和Compass制作雪碧图
1.安装好了sass与compass之后设置一个配置文件 2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹 3.@import命令引用 .Compass看到@import指令的参数为 ...
- Photoshop制作雪碧图技巧
雪碧图,就是将网页制作中使用的多个小图片合并成一个图片,使用css技术将这张合成的图片应用在网页不同的地方. 雪碧图可以减少网页加载时的http请求数,优化网页性能. 步骤: a.使用Photosho ...
- gulp 制作雪碧图
雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任 ...
- compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]
demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...
- 使用sass与compass合并雪碧图(一)
雪碧图就是很多张小图片合并成一张大图片,以减少HTTP请求,从而提升加载速度.有很多软件可以合并雪碧图,但通常不太容易维护,使用compass生成雪碧图应该算是非常方便的方法了,可以轻松的生成雪碧图, ...
- compass做雪碧图
由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when dep ...
- compass与css sprite(雪碧图)
什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链 ...
随机推荐
- 启动Activiti项目报错:org.activiti.engine.ActivitiObjectNotFoundException: no deployed process definition found with id '22501'
背景 启动activiti项目时,出现错误org.activiti.engine.ActivitiObjectNotFoundException: no deployed process defini ...
- 内置函数之sorted,filter,map
# 4,用map来处理字符串列表,把列表中所有人都变成sb,比方alex_sb # name=['oldboy','alex','wusir'] # print(list(map(lambda i:i ...
- Ubuntu: repository/PPA 源
在Ubuntu中,每个PPA源是单独存放在/etc/apt/sources.list.d/文件夹中的,进入到该文件夹,使用ls命令查询即可列出当前系统添加的PPA源. 添加 sudo add-apt- ...
- 倍数|计蒜客2019蓝桥杯省赛 B 组模拟赛(一)
思路:从l枚举到r肯定超时,这时我们要转变思路!题目让我们求一个区间内的d的倍数,只需要求出r/d - l/d就是区间内d倍数的个数. 代码: #include <iostream> us ...
- RocketMQ3.2.2生产者发送消息自动创建Topic队列数无法超过4个
问题现象 RocketMQ3.2.2版本,测试时尝试发送消息时自动创建Topic,设置了队列数量为8: producer.setDefaultTopicQueueNums(8); 同时设置broker ...
- Tengine(nginx) 搭建Tomcat集群
好久没有更新学习的内容了,就是得强迫自己写点东西 记录自己的学习,才能更好的进步! Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和 ...
- HDU 4302 Holedox Eating(multiset)
http://acm.hdu.edu.cn/showproblem.php?pid=4302 题意: 在一条直线上,会有多条命令,如果是0,那么就会在x位置处出现一个蛋糕,如果是1,某人就会找到最近的 ...
- 用 Anaconda 完美解决 Python2 和 python3 共存问题
Python3 被越来越多的开发者所接受,同时让人尴尬的是很多遗留的老系统依旧运行在 Python2 的环境中,因此有时你不得不同时在两个版本中进行开发,调试. 如何在系统中同时共存 Python2 ...
- Git 常用使用技巧
1.创建代码仓库 Step 1:先配置下我们的身份吧,这样在提交代码的时候Git就可以知道是谁提交的,命令如下: git config --global user.name "coder-p ...
- 【BZOJ】4013: [HNOI2015]实验比较
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4013 中第i 条涉及的图片对为(KXi, Xi),判断要么是KXi < Xi ,要么 ...