Sass and Compass making sprite chart

1. Set up a configuration file after Sass and compass are installed

2. Add a Sprite folder to hold the pictures that will be merged, such as the color folder

[email protected] The command Reference. when Compass sees the @import parameter for the instruction *.png , it assumes that all the pictures under this directory are .png made into a sprite.

You can also use certain rules to make it according to the picture and layout you need to generate the corresponding sprite, set the following:

The first box is set to create a large image of all the pictures under the Color folder, and the colleague compiles the corresponding CSS file.

The second box is set to make a larger image of the image under the color folder as needed.

4. When the command is executed, Compass Watch starts to generate a sprite chart

The results are as follows:

Take the corresponding CSS and use it in accordance with your own needs.

On-Line effects:

http://dongxuec3xr.e-horse.cn/

Reference link http://www.w3cplus.com/preprocessor/intermediate/spriting-with-sass-and-compass.html

Sass and Compass making sprite chart