ramonvictor/_base.scss

## _base.scss
// this file would be under "sass" directory
@mixin new-icon( $name, $is-sprite: false ){
  $icon-path: 'icons/' + $name + '-icon.png';

	display: inline-block;
	width: image-width($icon-path);
	height: image-height($icon-path);

	@if $is-sprite {
		$sprite-name: $name + '-icon';
		@include icons-sprite( $sprite-name );
	} @else {
		background: url(img/#{$icon-path}) no-repeat;
	}
}

## config.rb
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "css/img/"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
	<title>Compass sprite experiment project</title>
	<link href="css/main.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="main">
		<span class="linkedin-big-icon"></span>
		<span class="facebook-icon"></span>
		<span class="twitter-icon"></span>
	</div>
</body>
</html>

## main.css
/*
 * This file would be under "css" directory.
 * This is just an example on how the compiled
 * css would look like.
 */

/* Css reset would come here */

.icons-sprite, .facebook-icon, .twitter-icon {
  background: url('img/icons-s7070add67f.png') no-repeat;
}

#main {
  width: 500px;
  margin: 10px auto 0;
}

.facebook-icon {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-position: 0 -64px;
}

.twitter-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-position: 0 -112px;
}

.linkedin-big-icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  background: url(img/icons/linkedin-icon.png) no-repeat;
}

## main.scss
// this file would be under "sass" directory
@import "compass/reset";
@import "icons/*.png";

@import "base";

#main{
  width: 500px;
	margin: 10px auto 0;
}


@each $icon-name in facebook, twitter {
	.#{$icon-name}-icon{
		@include new-icon( $icon-name, true);
	}
}

.linkedin-big-icon{
	@include new-icon( linkedin );
}
	// this file would be under "sass" directory
	@mixin new-icon( $name, $is-sprite: false ){
	$icon-path: 'icons/' + $name + '-icon.png';

	display: inline-block;
	width: image-width($icon-path);
	height: image-height($icon-path);

	@if $is-sprite {
	$sprite-name: $name + '-icon';
	@include icons-sprite( $sprite-name );
	} @else {
	background: url(img/#{$icon-path}) no-repeat;
	}
	}
	# Set this to the root of your project when deployed:
	http_path = "/"
	css_dir = "css"
	sass_dir = "sass"
	images_dir = "css/img/"
	javascripts_dir = "js"

	# You can select your preferred output style here (can be overridden via the command line):
	# output_style = :expanded or :nested or :compact or :compressed
	output_style = :expanded

	# To enable relative paths to assets via compass helper functions. Uncomment:
	relative_assets = true

	# To disable debugging comments that display the original location of your selectors. Uncomment:
	line_comments = false
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Compass sprite experiment project</title>
	<link href="css/main.css" media="screen, projection" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<div id="main">
	<span class="linkedin-big-icon"></span>
	<span class="facebook-icon"></span>
	<span class="twitter-icon"></span>
	</div>
	</body>
	</html>
	/*
	* This file would be under "css" directory.
	* This is just an example on how the compiled
	* css would look like.
	*/

	/* Css reset would come here */

	.icons-sprite, .facebook-icon, .twitter-icon {
	background: url('img/icons-s7070add67f.png') no-repeat;
	}

	#main {
	width: 500px;
	margin: 10px auto 0;
	}

	.facebook-icon {
	display: inline-block;
	width: 48px;
	height: 48px;
	background-position: 0 -64px;
	}

	.twitter-icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-position: 0 -112px;
	}

	.linkedin-big-icon {
	display: inline-block;
	width: 64px;
	height: 64px;
	background: url(img/icons/linkedin-icon.png) no-repeat;
	}
	// this file would be under "sass" directory
	@import "compass/reset";
	@import "icons/*.png";

	@import "base";

	#main{
	width: 500px;
	margin: 10px auto 0;
	}


	@each $icon-name in facebook, twitter {
	.#{$icon-name}-icon{
	@include new-icon( $icon-name, true);
	}
	}

	.linkedin-big-icon{
	@include new-icon( linkedin );
	}