SASS - Compass

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: 2px solid black;
  @include border-radius(18px);
}

style.css

@import "social/*.png";
p{
  border: 2px solid black;
  @include border-radius(18px);
}

example 2

@import "compass";

@import "social/*.png"; --> generate all class with background positions@include all-social-sprites;
p{
  border: 2px solid black;
  @include border-radius(18px);
}

the output is below;

.social-sprite, .social-blogger, .social-facebook, .social-google, .social-rss, .social-twitter, .social-youtube {
  background-image: url('/images/social-s75d092ca5f.png');
  background-repeat: no-repeat; }

.social-blogger {
  background-position: 0 0; }

.social-facebook {
  background-position: 0 -64px; }

.social-google {
  background-position: 0 -128px; }

.social-rss {
  background-position: 0 -192px; }

.social-twitter {
  background-position: 0 -256px; }

.social-youtube {
  background-position: 0 -320px; }

p {
  border: 2px solid black;
  -moz-border-radius: 18px;
  -webkit-border-radius: 18px;
  border-radius: 18px; }