(3) Sass and Compass-make sprite images,

(3) Sass and Compass-make sprite images,
6.1 how the genie works

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

 

6.2 genie importance

// Compress the image memory;

// Reduce HTTP requests

6.2.3 Compass processing genie Solution

// 1. Point Compass to a folder of the genie;

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

// 3. Compile the style sheet;

 

6.3 use Compass to create a genie map 6.3.1

1 @ import "compass/utilities/sprites"; // sprite image control; 2 @ import "Icon/*. png ";//The Icon folder is located in the images folder and contains all the sprite images;3 4 //The generated genie image is located in the images folder.And generate the compiled CSS; 5 CSS: 6. icon-sprite {// automatically generated class name; 7 background-image: url ('/images/Icon-s040daee5af.png'); 8 background-repeat: no-repeat; 9}

6.3.2 introduce the genie and generate CSS

1.All-Sprites genie Mixer2 Sass: 3@ Include all-Icon-sprites; // write all necessary CSS for the entire sprite map;4 CSS: // generated content; 5. icon-sprite ,. icon-index1 ,. icon-index2 ,. icon-index3 ,. icon-index4 ,. icon-index5 {6 background-image: url ('/images/Icon-s040daee5af.png ');//All related classes reference this image;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 // use @ extend to inherit the sprite style 18 Sass: 19. add-button {@ extend. icon-index1 }//This method will generate less CSS;20 CSS: 21. Icon-index1,. add-button {//Directly overlays a class, which is more convenient;22 background-position: 0 0; 23}

12. single-sprite genie Mixer2 Icon-sprite ($ name );//Output a CSS with an independent name Sprite; $ Name: name of an image (index1); 3 Sass: 4. the add-button2 {5 @ include Icon-sprite (index5); 6} 7 CSS: 8. add-button2 {9 background-position: 0-560px; // The position of the image corresponding to index5; 10}

6.4 configure the Compass genie 6.4.1 custom genie Map

// YesCustomize a wizard map or customize the wizard through its configuration variables;

// <Map>:File name for storing the genie;

// <Sprite>:Name of a separate genie Image;

// All the variables in the following configuration must be defined before the import wizard ("@ include all-Icon-sprites;

11. Configure the spacing between sprite Images2 $ <map>-spacing: Xpx; // set the spacing between all sprite images to Xpx; 3 $ <map>-<sprite>-spacing: Xpx; // set the spacing of a sprite. 4 Sass: 5$ Icon-spacing: 4px;//The spacing of all images is 4 PX;6$ Icon-index1-spacing: 12px;//The index1 image spacing is 12 PX;

12. Set the sprite's Repeatability2 $ <map>-repeat: no-repeat/repeat-x; // The default value is no-repeat. Setting it to repeat-x can tile its x axis; 3 $ <map>-<sprite>-repeat: no-repeat/repeat-x; // you can specify the duplicate attributes of a single image. 4 Sass: 5$ Icon-index2-repeat: repeat-x;// The index2 image is horizontally tiled In the sprite image;

3. Set the location of the genie$ <Map>-position: Xpx ;//Move the Xpx distance vertically to the right (horizontally down;$ <Map>-<sprite>-position: Xpx; Sass:$ Icon-Positioin: 10px; // All images are 10px to the right;

14. Set the layout of the genie Map2 $ <mpa>-layout:Vertical (vertical)/Horizontal (horizontal)/Diagonal (diagonal )/Smart (minimum blank area); // The default layout is vertical;
$ Icon-layout: horizontal; // defined before introducing the sprites module;
15. Clear expired genie maps2 $ <map>-clean-up: true/false;

6.4.2 customize the CSS of the genie

11. Size of the output genie2 $ <map>-sprite-height ($ name); // get the height of a sprite image; 3 $ <map>-sprite-width ($ name ); 4 $ <map>-sprite-dimensions: true/false; // It is the automatic output size of each sprite in the sprite map; 5 Sass: 6. next {7 @ include Icon-sprite (index2); 8 width:Icon-sprite-width (index2); // Get the size of the sprite image; 9} 10 CSS: 11. next {12 background-position:-10px-150px; 13 width: 140px; // size of the generated image; 14}

12. Basic genie classes2 // Compass allows you to easily apply a normal style to each genie by generating a basic class; 3 $ <map>-sprite-base-class :". class-name "; 4 // when using a mixer of all or individual genie, Compass outputs a basic class of the genie.The selector concatenates all the selectors with the background-image attribute.; 5 //Each basic class of a Sprite map is named after its folder.; 6 Sass: 7$ Icon-sprite-base-class: ". Icon ";8. Icon {//Sets the CSS basic class of the genie;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}

13. magic genie Selector2 $ disable-magic-sprite-selectors: true/false; 3 // The magic genie selector is enabled by default, that is, Compass willThe hover/: active and: target pseudo selectors of CSS are automatically output based on the names ending with "_ hover"/"_ active" or "_ target;4 // Add in the Icon folderIndex4_hover.pngWill automaticallyGenerate the index-4: hover class and related code5 CSS: 6. Icon-index4 {7 background-position: 0-420px; 8} 9. Icon-index4: hover.,. Icon-index4.Index4-Hover{10 background-position: 0-560px; 11}

6.5 use the wizard 6.5.1 to create a wizard Map

// The previous "@ import 'icon/*. png '", not onlyCreated a genie Map, AlsoThe wizard map and each genie has a mixer and variable set;

11. sprite-map helper2 $ Icon:Sprite-map("Icon/*. png ",$ Layout: smart); // It creates a smart layout sprite map and assigns the image URL of the sprite map to the $ Icon variable;

12. sprite-map Helper -- set a single genie2 $ Icon: sprite-map ("Icon/*. png", $ index2-spacing: 5px );

6.5.2 write the sprite CSS

// After Compass generates a Sprite map for you, you still need to write CSS for each Sprite;

11. sprite helper2Sprite($ Map, $ sprite, [$ offset-x], [$ offset-y]);
// $ Map: Basic sprite class; $ sprite: name of a single image, used to locate the background image; 3 // sprite helper requires the sprite map/sprite name and optional offset coordinates; 4 Sass: 5 $ Icon: sprite-map ("Icon /*. png ", $ layout: smart); 6 //One advantage of the genie basic class is that you only need to assign a value to the background image once (copy the path to the variable); 7. next {8 background:Sprite ($ Icon, index2) no-Repeat; 9} 10 //This will only output the background attribute, and will not become a basic class of the genie or any other CSS that is not needed.; 11 CSS: 12. next {13 background: url ('/images/Icon-s6558f78e4f.png') 0-140px no-repeat; 14}

12. Set the location of the genie2 // to remove duplicate background images, you can use the sprite-position helper or sprite-background-position mixer to replace the sprite helper; 3 Sass: 4 $ Icon: sprite-map ("Icon /*. png ");//Helper to create a genie Map; 5. sprite-base {background: $ Icon no-repeat;} // introduce the sprite map; 6. next {7@ Extend. sprite-base; // @ Extend reference; 8 background-position: sprite-position ($ Icon, index2); 9 // set the background-position attribute; 10 // sprite-position: helper, used to locate the image location; 11 // $ Icon: Variable, introducing the path of the genie image; 12 // index2: parameters for locating the index2 position of the genie image; 13} 14 CSS: 15. Sprite-Base,. next{16 background: url ('/images/Icon-sb501daeae5.png') no-repeat; 17} 18. next {19 background-position: 0-140px; 20}

13. Set the sprite-dimensisons mixer.2 //It requires the sprite map and sprite name, and outputs the measured size;3 Sass: 4 $ Icon: sprite-map ("Icon /*. png "); // The helper to create a wizard map; 5. sprite-base {background: $ Icon no-repeat;} // introduce the sprite map; 6. add {7 @ extend. sprite-base; 8 @ include sprite-background-position ($ Icon, index3); // sprite Image Positioning helper; 9 @ include sprite-dimensions ($ Icon, index3 ); 10}

Conclusion 6.6

// 1. The impact of loading a large number of images from a remote server on performance and how genie images can be used as an important method to solve high-traffic website problems;

// 2. How is Compass complete?Automated Processing wizard, And exploredConfigure and control how Compass generates sprite maps and CSS;