6.1 精灵的工作原理

// 将各种图片合并到一张图片里面,并在不同的状态下改变背景图片的位置;

6.2 精灵的重要性

// 压缩图片的内存;

// 减少HTTP请求

6.2.3 Compass处理精灵方案

// 1.让Compass指向一个精灵的文件夹;

// 2.告诉Compass撰写精灵CSS;

// 3.编译样式表;

6.3 用Compass制作精灵

6.3.1 创建一个精灵地图

 @import "compass/utilities/sprites";    // 精灵图片控件;
@import "Icon/*.png"; // Icon文件夹位于images文件夹内并包含所有精灵图片; // 生成精灵图片位于images文件夹内;并生成编译后的CSS;
CSS:
.Icon-sprite {             // 自动生成的类命名;
background-image: url('/images/Icon-s040daee5af.png');
background-repeat: no-repeat;
}

6.3.2 引入精灵并生成CSS

 1.all-sprites精灵混合器
Sass:
@include all-Icon-sprites; // 为整个精灵地图撰写所有必要的CSS;
CSS:                     // 生成内容;
.Icon-sprite, .Icon-index1, .Icon-index2, .Icon-index3, .Icon-index4, .Icon-index5 {
background-image: url('/images/Icon-s040daee5af.png');  // 所有的相关类都引用此图片;
background-repeat: no-repeat;
}
.Icon-index1 {
background-position: 0 0;
}
...
.Icon-index5 {
background-position: 0 -560px;
} // 使用@extend继承精灵的样式
Sass:
.add-button { @extend .Icon-index1} // 这种方法会生成更少的CSS;
CSS:
.Icon-index1, .add-button {     // 直接叠加了一个类,比较方便;
background-position: 0 0;
}
 2.single-sprite精灵混合器
Icon-sprite($name); // 输出一个独立命名精灵的CSS; $name:单独图片的名字(index1);
Sass:
.add-button2 {
@include Icon-sprite(index5);
}
CSS:
.add-button2 {
background-position: 0 -560px; // 与index5对应的图片的位置;
}

6.4 配置Compass精灵

6.4.1 自定义精灵地图

// 可以自定义一个精灵地图或通过其配置变量有针对性地定义精灵;

// <map>:存放精灵的文件名;

// <sprite>:某个单独的精灵图片的名字;

// 以下配置的所有变量需在导入精灵("@include all-Icon-sprites")之前被定义;

 1.配置精灵图之间的间距
$<map>-spacing:Xpx; // 设置所有精灵图之间的间距为Xpx;
$<map>-<sprite>-spacing:Xpx; // 设置某个精灵图的间距;
Sass:
$Icon-spacing:4px; // 所有图片的间距为4px;
$Icon-index1-spacing:12px; // index1图片的间距为12px;
 2.设置精灵的重复性
$<map>-repeat:no-repeat/repeat-x; // 默认值是no-repeat;设置为repeat-x可以使其X轴平铺;
$<map>-<sprite>-repeat:no-repeat/repeat-x;  // 设置单个图片的重复属性;
Sass:
$Icon-index2-repeat:repeat-x; // index2图片在精灵图片里边横向平铺;
3.设置精灵的位置
$<map>-position:Xpx; // 垂直向右(水平向下)移动Xpx距离;
$<map>-<sprite>-position:Xpx;
Sass:
$Icon-positioin: 10px;         // 所有图片向右10px;
 4.设置精灵地图的布局
$<mpa>-layout: vertical(垂直)/horizontal(水平)/diagonal(对角线)/smart(产生最小的空白区域); // 默认布局是vertical;
$Icon-layout:horizontal;        // 在引入sprites模块之前定义;
 5.清除过期的精灵地图
$<map>-clean-up:true/false;

6.4.2 自定义精灵的CSS

 1.输出精灵的尺寸
$<map>-sprite-height($name); // 得到某个精灵图片的高度;
$<map>-sprite-width($name);
$<map>-sprite-dimensions:true/false; // 为精灵地图中的每个精灵自动输出尺寸;
Sass:
.next {
@include Icon-sprite(index2);
width:Icon-sprite-width(index2);// 得到精灵图片的大小;
}
CSS:
.next {
background-position: -10px -150px;
width: 140px;           // 生成的图片大小;
}
 2.精灵的基础类
// Compass可以方便地通过生成一个基础类为每个精灵应用普通样式;
$<map>-sprite-base-class:".class-name";
// 当使用全部精灵或单独精灵的混合器时,Compass会输出一个精灵的基础类;并且其选择器还会串联所有设置了background-image属性的选择器;
// 每个精灵地图的基础类都以其文件夹的名字命名;
Sass:
$Icon-sprite-base-class: ".Icon";
.Icon { // 设置精灵的CSS基础类;
overflow: hidden;
width:Icon-sprite-width(index1);
}
CSS:
.Icon, .Icon-index1, .Icon-index2, .Icon-index3, .Icon-index4, .Icon-index5 {
overflow: hidden;
width: 140px;
}
 3.魔术精灵选择器
$disable-magic-sprite-selectors:true/false;
// 魔术精灵选择器是默认开启的,也就是说Compass在精灵时会根据以"_hover"/"_active"或"_target"结尾的名字自动输出CSS的:hover/:active和:target伪选择器;
// 在Icon文件夹内添加index4_hover.png之后会自动生成关于index-4:hover的类及相关代码;
CSS:
.Icon-index4 {
background-position: 0 -420px;
}
.Icon-index4:hover, .Icon-index4.index4-hover {
background-position: 0 -560px;
}

6.5 驾驭精灵辅助器

6.5.1 创建精灵地图

// 之前的"@import 'Icon/*.png'",不仅创建了一个精灵地图,还为精灵地图和每个精灵设置了混合器和变量;

 1.sprite-map辅助器
$Icon:sprite-map("Icon/*.png",$layout:smart); // 它会创建一个智能布局的精灵地图,并把精灵地图的图片URL赋值给$Icon变量;
 2.sprite-map辅助器--设置单个精灵
$Icon:sprite-map("Icon/*.png",$index2-spacing:5px);

6.5.2 撰写精灵的CSS

// 在Compass为你生成精灵地图之后,仍需要写出每个精灵的CSS;

 1.sprite辅助器
sprite($map,$sprite,[$offset-x],[$offset-y]);
  // $map:精灵基础类; $sprite:单个图片名,用于定位背景图片;
// sprite辅助器需要精灵地图/精灵的名字以及可选的偏移坐标;
Sass:
$Icon:sprite-map("Icon/*.png",$layout:smart);
// 精灵基础类的一个优点就是只需要赋值一次背景图片(把路径复制到变量中);
.next {
background:sprite($Icon,index2) no-repeat;
}
// 这仅仅会输出背景属性,而不会成为一个精灵的基础类或其他任何不需要的CSS;
CSS:
.next {
background: url('/images/Icon-s6558f78e4f.png') 0 -140px no-repeat;
}
 2.设置精灵的位置
// 为了移除重复的背景图片,你可以用sprite-position辅助器或sprite-background-position混合器取代sprite辅助器;
Sass:
$Icon:sprite-map("Icon/*.png"); // 辅助器创建精灵地图;
.sprite-base { background:$Icon no-repeat; }// 引入精灵地图;
.next {
@extend .sprite-base; // @extend引用;
background-position:sprite-position($Icon, index2);
// 设置background-position属性;
// sprite-position:辅助器,用于定位图片位置;
// $Icon:变量,引入精灵图片路径;
// index2:定位精灵图片index2位置的参数;
}
CSS:
.sprite-base, .next {
background: url('/images/Icon-sb501daeae5.png') no-repeat;
}
.next {
background-position: 0 -140px;
}
 3.设置精灵的尺寸--sprite-dimensisons混合器
// 它需要精灵地图和精灵的名字,并输出经过测量的尺寸;
Sass:
$Icon:sprite-map("Icon/*.png"); // 辅助器创建精灵地图;
.sprite-base { background:$Icon no-repeat; }// 引入精灵地图;
.add {
@extend .sprite-base;
@include sprite-background-position($Icon,index3); // 精灵图片定位辅助器;
@include sprite-dimensions($Icon,index3);
}

6.6  小结

// 1.从远程服务器加载大量图片对性能的影响以及精灵图片如何作为重要方法解决高流量网站问题;

// 2.Compass如何完全自动化处理精灵,并探索了配置及控制Compass生成精灵地图和CSS的几种方式;

(三)Sass和Compass--制作精灵图片的更多相关文章

  1. Sass和Compass制作雪碧图

    1.安装好了sass与compass之后设置一个配置文件 2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹 3.@import命令引用 .Compass看到@import指令的参数为 ...

  2. Qt移动应用开发(三):使用精灵图片实现帧动画

    Qt移动应用开发(三):使用精灵图片实现帧动画 上一篇博文讲到了Qt Quick对于动画的一般支持.动画的形式多样,配合不同的插值函数,能够差点儿实现全部想要的动画效果,而对于游戏的一些特殊的效果比方 ...

  3. c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合,找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理(完全指北)

    c#封装DBHelper类   public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...

  4. Sass和Compass学习笔记系列之Sass

    最近在慕课网学习Sass和Compass,学习链接地址:https://www.imooc.com/learn/364,现在整理笔记如下: 一.使用Sass和Compass的优点: a.使用Sass和 ...

  5. 使用Compass制作雪碧图

    遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...

  6. 使用sass与compass合并雪碧图(一)

    雪碧图就是很多张小图片合并成一张大图片,以减少HTTP请求,从而提升加载速度.有很多软件可以合并雪碧图,但通常不太容易维护,使用compass生成雪碧图应该算是非常方便的方法了,可以轻松的生成雪碧图, ...

  7. [已读]Sass与Compass实战

    介绍了Sass基础语法与Compass框架,这个网上参考文档就OK了,另外介绍了compass生成图片精灵和相应的css,貌似现在单纯用sass和compass的挺少,要不grunt,要不FIS,而g ...

  8. 2DToolkit官方文档中文版打地鼠教程(三):Sprite Collections 精灵集合

    这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...

  9. 分享15款很实用的 Sass 和 Compass 工具

    Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任 ...

随机推荐

  1. 检索COM类工厂中CLSID为{10020100-E260-11CF-AE68-00AA004A34D5}的组件时失败,原因是出现以下错误:80040154

    {"检索 COM 类工厂中 CLSID 为 {10020100-E260-11CF-AE68-00AA004A34D5} 的组件时失败,原因是出现以下错误: 80040154."} ...

  2. 三种定义bean的方式

    方法一:基于XML的bean定义(需要提供setter方法) 1.首先编写student.java和teacher.java两个类 Student.java: public class Student ...

  3. 833. Find And Replace in String

    To some string S, we will perform some replacement operations that replace groups of letters with ne ...

  4. Java学习笔记46(多线程三:线程之间的通信)

    多个线程在处理同一个资源,但是线程的任务却不相同,通过一定的手段使各个线程能有效地利用资源, 这种手段即:等待唤醒机制,又称作线程之间的通信 涉及到的方法:wait(),notify() 示例: 两个 ...

  5. Python 基础:分分钟入门

    Python和Pythonic Python是一门计算机语言(这不是废话么),简单易学,上手容易,深入有一定困难.为了逼格,还是给你们堆一些名词吧:动态语言.解释型.网络爬虫.数据处理.机器学习.We ...

  6. Network - 互联网协议简介

    珠玉在前,不在赘言 互联网协议入门(一) 互联网协议入门(二) 通信协议:HTTP.TCP.UDP 互联网协议入门 互联网协议入门深入 当你输入一个网址,实际会发生什么? Wireshark基本介绍和 ...

  7. [Leetcode]59.螺旋矩阵Ⅱ

    给定一个正整数 n,生成一个包含 1 到 n2 所有元素,且元素按顺时针顺序螺旋排列的正方形矩阵. 示例: 输入: 3 输出: [ [ 1, 2, 3 ], [ 8, 9, 4 ], [ 7, 6, ...

  8. Alienware-15-R3 装Ubuntu 16.04.3 LTS

    前言:Alienware-15-R3默认安装的系统是win10.现在卸载win0,装Ubuntu 16.04.3 LTS. 一.下载Ubuntu 16.04.3 LTS镜像文件,下载地址:https: ...

  9. Android应用内展示office文件--腾讯浏览服务(TBS)

    什么是TBS  依托 X5 内核强大的能力,致力于提供优化移动端浏览体验的整套解决方案(官网介绍).我们可利用其做文件浏览功能,支持多种文件格式,完全可以满足需求.更多介绍请看官网:http://x5 ...

  10. TCP/IP 笔记 - Internet协议

    IP是TCP/IP协议族中的核心协议,TCP.UDP.ICMP.IGMP数据都通过IP数据报传输.IP提供了一种"尽力而为.无连接"的数据交付服务:尽力而为表示不保证IP数据报能成 ...