(3) Sass and Compass create sprite pictures_html/css_WEB-ITnose

6.1 How elves work

// Merge various images into one image, and change the position of the background image in different states;

6.2 The importance of sprites

// Compress image memory;

// Reduce HTTP requests

6.2.3 Compass processing sprite solution

/// 1. Let Compass point to a sprite’s folder;

// 2. Tell Compass to write the sprite CSS;

// 3. Compile the style sheet;

6.3 Making sprites with Compass

6.3.1 Creating a sprite map

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

6.3 .2 Introduce the sprite and generate CSS

 1 1.<strong>all-</strong><strong>sprites精灵混合器</strong>  2 Sass:  3     <strong>@include all-Icon-sprites; // 为整个精灵地图撰写所有必要的CSS;</strong> 4 CSS:　　　　　　　　　　　　　　　　　　　　 // 生成内容;  5     .Icon-sprite, .Icon-index1, .Icon-index2, .Icon-index3, .Icon-index4, .Icon-index5 {  6         background-image: url('/images/Icon-s040daee5af.png');　　// <strong>所有的相关类都引用此图片; </strong> 7         background-repeat: no-repeat;  8  }  9     .Icon-index1 { 10         background-position: 0 0; 11  } 12  ... 13     .Icon-index5 { 14         background-position: 0 -560px; 15  } 16 17 // 使用@extend继承精灵的样式18 Sass: 19     .add-button { @extend .Icon-index1} //<strong> 这种方法会生成更少的CSS;</strong>20 CSS: 21     .Icon-index1, .add-button {　　　　 //<strong> 直接叠加了一个类,比较方便; </strong>22         background-position: 0 0; 23     }

 1 <strong>2.single-sprite精灵混合器 </strong> 2 Icon-sprite($name);                     //<strong> 输出一个独立命名精灵的CSS</strong>; $name:单独图片的名字(index1); 3 Sass:  4     .add-button2 {  5         @include Icon-sprite(index5);  6  }  7 CSS:  8     .add-button2 {  9         background-position: 0 -560px; // 与index5对应的图片的位置; 10     }

6.4 Configure the Compass sprite

6.4.1 Customized sprite map

// You can customize a sprite map or define the sprite specifically through its configuration variables ;

// dab9f699790ab0922e596ecb9f6677d5:The name of the file that stores the sprite;

// 3005281ac185dd9a8eb37084b246a805:The name of a separate sprite image;

// The following configuration All variables need to be defined before importing sprites ("@include all-Icon-sprites");

1 <strong>1.配置精灵图之间的间距 </strong>2 $<map>-spacing:Xpx;                     // 设置所有精灵图之间的间距为Xpx;3 $<map>-<sprite>-spacing:Xpx;            // 设置某个精灵图的间距;4 Sass: 5     <strong>$Icon-spacing:4px;</strong>                  //<strong> 所有图片的间距为4px;</strong>6     <strong>$Icon-index1-spacing:12px</strong>;          //<strong> index1图片的间距为12px;</strong>

1 <strong>2.设置精灵的重复性 </strong>2 $<map>-repeat:no-repeat/repeat-x;       // 默认值是no-repeat;设置为repeat-x可以使其X轴平铺; 3 $<map>-<sprite>-repeat:no-repeat/repeat-x;　　// 设置单个图片的重复属性;4 Sass: 5     <strong>$Icon-index2-repeat:repeat-x;</strong>       // index2图片在精灵图片里边横向平铺;

<strong>3</strong><strong>.设置精灵的位置</strong> $<map>-position:Xpx;                      //<strong> 垂直向右(水平向下)移动Xpx距离;</strong>$<map>-<sprite>-position:Xpx; Sass: <strong>$Icon</strong><strong>-positioin: 10px;　　　　　　　　 // 所有图片向右10px;</strong>

1<strong> 4.设置精灵地图的布局 </strong>2 $<mpa>-layout: <strong>vertical(垂直)</strong>/<strong>horizontal(水平)</strong>/diagonal(对角线)/<strong>smart(产生最小的空白区域)</strong>;  // 默认布局是vertical;  $Icon-layout:horizontal;　　　　　　　 // 在引入sprites模块之前定义;

1 <strong>5.清除过期的精灵地图 </strong>2 $<map>-clean-up:true/false;

6.4.2 Custom sprite CSS

 1 <strong>1.输出精灵的尺寸 </strong> 2 $<map>-sprite-height($name);            // 得到某个精灵图片的高度; 3 $<map>-sprite-width($name);  4 $<map>-sprite-dimensions:true/false;    // 为精灵地图中的每个精灵自动输出尺寸;  5 Sass:  6  .next {  7         @include Icon-sprite(index2);  8         width:<strong>Icon-sprite-width(index2)</strong>;// 得到精灵图片的大小; 9  } 10 CSS: 11  .next { 12         background-position: -10px -150px; 13  width: 140px;　　　　　　　　　　 // 生成的图片大小; 14     }

 1 <strong>2.精灵的基础类 </strong> 2 // Compass可以方便地通过生成一个基础类为每个精灵应用普通样式; 3 $<map>-sprite-base-class:".class-name";  4 // 当使用全部精灵或单独精灵的混合器时,Compass会输出一个精灵的基础类;并且其<strong>选择器还会串联所有设置了background-image属性的选择器</strong>; 5 //<strong> 每个精灵地图的基础类都以其文件夹的名字命名</strong>; 6 Sass:  7     <strong>$Icon-sprite-base-class: ".Icon"; </strong> 8     .Icon {                             //<strong> 设置精灵的CSS基础类;</strong> 9  overflow: hidden; 10         width:Icon-sprite-width(index1); 11  } 12 CSS: 13     .Icon, .Icon-index1, .Icon-index2, .Icon-index3, .Icon-index4, .Icon-index5 { 14  overflow: hidden; 15  width: 140px; 16     }

 1 <strong>3.魔术精灵选择器 </strong> 2 $disable-magic-sprite-selectors:true/false; 3 // 魔术精灵选择器是默认开启的,也就是说Compass在精灵时会<strong>根据以"_hover"/"_active"或"_target"结尾的名字自动输出CSS的:hover/:active和:target伪选择器;</strong> 4 // 在Icon文件夹内添加<strong>index4_hover.png</strong>之后会自动<strong>生成关于index-4:hover的类及相关代码</strong>; 5 CSS:  6     .Icon-index4 {  7         background-position: 0 -420px;  8  }  9     <strong>.Icon-index4:hover</strong>, .Icon-index4.<strong>index4-</strong><strong>hover</strong> { 10         background-position: 0 -560px; 11     }

6.5 Controlling Elf Assistant

6.5.1 Creating Elf Map

// Previous "@import ' Icon/*.png'", not only creates a sprite map, but also sets mixers and variables for the sprite map and each sprite ;

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

1 <strong>2.sprite-map辅助器--设置单个精灵 </strong>2 $Icon:sprite-map("Icon/*.png",$index2-spacing:5px);

6.5.2 Writing the CSS of the sprites

// After Compass generates the sprite map for you, you still need to write the CSS of each sprite;

 1 <strong>1.sprite辅助器 </strong> 2 <strong>sprite</strong>($map,$sprite,[$offset-x],[$offset-y]);　　// $map:精灵基础类; $sprite:单个图片名,用于定位背景图片;  3 // sprite辅助器需要精灵地图/精灵的名字以及可选的偏移坐标; 4 Sass:  5     $Icon:sprite-map("Icon/*.png",$layout:smart);  6     //<strong> 精灵基础类的一个优点就是只需要赋值一次背景图片(把路径复制到变量中)</strong>; 7  .next {  8         background:<strong>sprite($Icon,index2) no-</strong><strong>repeat</strong>;  9  } 10 //<strong> 这仅仅会输出背景属性,而不会成为一个精灵的基础类或其他任何不需要的CSS</strong>;11 CSS: 12  .next { 13         background: url('/images/Icon-s6558f78e4f.png') 0 -140px no-repeat; 14     }

 1 <strong>2.设置精灵的位置 </strong> 2 // 为了移除重复的背景图片,你可以用sprite-position辅助器或sprite-background-position混合器取代sprite辅助器; 3 Sass:  4     $Icon:sprite-map("Icon/*.png");             //<strong> 辅助器创建精灵地图</strong>; 5     .sprite-base { background:$Icon no-repeat; }// 引入精灵地图; 6  .next {  7         <strong>@extend .sprite-base</strong>;                   // @extend引用; 8         background-position:sprite-position($Icon, index2);  9         // 设置background-position属性;10         // sprite-position:辅助器,用于定位图片位置;11         // $Icon:变量,引入精灵图片路径;12         // index2:定位精灵图片index2位置的参数;13  } 14 CSS: 15     <strong>.sprite-</strong><strong>base, .next</strong> { 16         background: url('/images/Icon-sb501daeae5.png') no-repeat; 17  } 18  .next { 19         background-position: 0 -140px; 20     }

 1 <strong>3.设置精灵的尺寸--sprite-dimensisons混合器 </strong> 2 //<strong> 它需要精灵地图和精灵的名字,并输出经过测量的尺寸;</strong> 3 Sass:  4     $Icon:sprite-map("Icon/*.png");             // 辅助器创建精灵地图; 5     .sprite-base { background:$Icon no-repeat; }// 引入精灵地图; 6  .add {  7         @extend .sprite-base;  8         @include sprite-background-position($Icon,index3);  // 精灵图片定位辅助器; 9         @include sprite-dimensions($Icon,index3); 10     }

6.6 Summary

// 1. Load a large amount of data from the remote server The impact of images on performance and how sprite images are an important method to solve high-traffic website problems;

// 2. How Compass completely automates processing of sprites , and explored configuration and control Several ways for Compass to generate sprite maps and CSS ;