A brief introduction to the usage of the sprite diagram of the compass frame

---restore content starts---

* * Introduction **CSS sprite is CSS Sprite, that is, a lot of pictures to synthesize a picture, and then use the CSS background and background-position property rendering. The advantage of this is that it reduces the number of HTTP requests to the website **compass how to merge Sprite **1. Put the pictures you need to merge (1.png,2.png,3.png ...) Add a new folder Test2 under the images file. In the Scss file, use @import to point to these pictures, and compass will automatically merge these pictures into a picture    @import "test/*.png";//represents all the PNG format pictures 3. About the merging direction of the pictures: by default, is upright. To modify the arrangement direction:/    * Horizontal arrangement */    $test-layout:horizontal;    @import "Test/*.png"/    * Diagonal arrangement */    $test-layout:diagonal;    @import "Test/*.png" 4. Use Sprite chart:    @include all-folder name-sprites; To use one of the pictures in the sprite chart in a specified selector:    div{        @include Test-sprite (picture file name);//The picture file name does not have to be suffix    }6. Specifies the height and width of the specified selector (to be highly yo. Otherwise the page does not see the graph):    div{        @include test-sprite (picture file name);/        * Set width        /*/height:test-sprite-height (picture filename);        Width:test-sprite-width (picture file name);    }     

* * Note: About the format of merged pictures * *

It appears to be in PNG format only.

---restore content ends---

A brief introduction to the usage of the sprite diagram of the compass frame