6.1 精灵的工作原理// 将各种图片合并到一张图片里面,并在不同的状态下改变背景图片的位置; 6.2 精灵的重要性// 压缩图片的内存;// 减少HTTP请求6.2.3 Compass处理精灵方案// 1.让Compass指向一个精灵的文件夹;// 2.告诉Compass撰 ...
6.1 精灵的工作原理
// 将各种图片合并到一张图片里面,并在不同的状态下改变背景图片的位置;
6.2 精灵的重要性
// 压缩图片的内存;
// 减少HTTP请求
6.2.3 Compass处理精灵方案
// 1.让Compass指向一个精灵的文件夹;
// 2.告诉Compass撰写精灵CSS;
// 3.编译样式表;
6.3 用Compass制作精灵
6.3.1 创建一个精灵地图
1 @import "compass/utilities/sprites"; // 精灵图片控件;2 @import "Icon/*.png"; // Icon文件夹位于images文件夹内并包含所有精灵图片;3 4 // 生成精灵图片位于images文件夹内;并生成编译后的CSS;5 CSS:6 .Icon-sprite { // 自动生成的类命名; 7 background-image: url('/images/Icon-s040daee5af.png');8 background-repeat: no-repeat;9 }
原标题:(三)Sass和Compass
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。