Compass Spites

_sprites.scss

// ---------------- Basic ----------------
@import "compass/utilities/sprites";

$icon-spacing: 1px;  			// $<folder>-spacing; distance separating each image
$icon-sprite-dimensions: true; 	// include the dimensions of each sprite

@import "icon/*.png"; 			// img dir location is defined inside config,rb
@include all-icon-sprites;  	// all-<folder>-sprites;



// ---------------- More control over CSS selector names ----------------
@import "compass/utilities/sprites";

$icon-spacing: 1px;			// $<folder>-spacing; distance separating each image


@import "icon/*.png"; 		// img dir location is defined inside config,rb


.icon {
	.twitter { @include icon-sprite(twitter); }
	.facebook { @include icon-sprite(facebook); }
}



// ---------------- Retina ----------------
@import "compass/utilities/sprites";

$icon-spacing: 1px;				// $<folder>-spacing; distance separating each image
$icon-sprite-dimensions: true; 	// include the dimensions of each sprite

@import "icon/*.png"; 			// img dir location is defined inside config,rb
@import "icon/retina/*.png"; 			// img dir location is defined inside config,rb
@include all-icon-sprites;  	// all-<folder>-sprites;


// will produce a large root sprite only, not sub-dir sprites



// ---------------- Magic selectors ----------------
\img
+-\icon
+--button.png
+--button_hover.png
+--button_active.png
+--button_target.png



// ---------------- Use inline other .scss files ----------------

@include sprite-background-position($nav-icons-sprites, shoppingcart, 0, 4px);


.another-twitter-thing {
	@extend .icon-twitter;	
}




// ---------------- Config.rb asset paths ----------------

# config.rb
images_dir = "../img"
http_generated_images_path = "/assets/img"