(3) Sass and Compass-make sprite images,

Source: Internet
Author: User

(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;

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.