If you want sass to generate the classes to be generated to support “clearfix”  (clearing all the floats of previous content to be sure the element is always rendered at a new clear line). With the newest sass compiler you can use placeholders that are not generated until they are used  and can be extended.

%clearfix {
	zoom: 1;
	&:before,
	&:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0;
	}
	&:after {
	  clear: both;
	}
}
.container {
  @extend %clearfix;
  text-align: left;
}
.footer {
  @extend %clearfix;
  text-align: center;
}

This will generate:

.container, .footer {
  zoom: 1;
}
.container:before, .footer:before, .container:after, .footer:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.container:after, .footer:after {
  clear: both;
}
.container {
  text-align: left;
}
.footer {
  text-align: center;
}

An inline image is an image that is generated as base64 string inside the stylesheet. But this is not supported by IE6 if you want to support both you can use the * hack for IE6 like this:

@import "compass";
@mixin inline-image($url, $repeat:repeat){
  background: inline-image($url) $repeat;
  *background: image-url($url) $repeat;
}
.facebook {
  width: 34px;
  height: 34px;
  @include inline-image("icons/facebook.png",no-repeat);
}

And generates:
.facebook {
width: 34px;
height: 34px;
background: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAFbUlEQVR4XrWXT4hd…’) no-repeat;
*background: url(‘../images/icons/facebook.png?1346742026’) no-repeat;
}

Here is an example for a sass stylesheet. to support Retina display images. This example only support .png images where the basename of the image is passed to the mixin as variable.

@mixin retina {
  @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
    @content;
  }
}

@mixin generic-background-image($image) {
	background: image-url("#{$image}.png");
	  @include retina {
	    background: image-url("#{$image}@2X.png");
	}
}

h1 {
	@include generic-background-image("content");
}

This will generate:

h1 {
  background: url('../images/content.png');
}
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  h1 {
    background: url('../images/content@2X.png');
  }
}