Günay's Coding World

Sprite is a collection of images put into a single image. Sprites are used to decrease number of requests to server from the users If you created your website properly the most useful layout setting for sprite is smart . _hover:   In order to create automatically : hover styles in your output CSS for the image you type after the name of image In order to create width and height for all images inside the sprite you use variable called $ -sprite-dimensions

compass init -> initialize a new project in current folder compass create --> create a new project compass compile --> convert and create css file compass watch --> watch for changes on source code. If changes happen, compile source code. sprite -> single image contains more than one image.Many small images combines together to became a single image. You should create a folder and put all images under that folder, rest of process is handled by compass :)) example 1 style.scss @import "social/*.png" ; p { border : 2 px solid black ; @include border-radius ( 18 px ); } style.css @import "social/*.png" ; p { border : 2 px solid black ; @include border-radius ( 18 px ); } example 2 @import "compass" ; @import "social/*.png" ; --> generate all class with background positions @include all-social-sprites ; p { border : 2 px solid black ; @include border-radius ( 18 px ); } the output is below; ...