Compass sprite for loop example

main.scss

@import "compass";
@import "compass/reset";

@import "icon/*.png";
@include all-icon-sprites;
@import "logo/*.png";
@include all-logo-sprites;
@import "pencil/*.png";
@include all-pencil-sprites;


.icon-sprite,
.logo-sprite,
.pencil-sprite {
  display: block;
  text-indent: -99999em;
}

$icons: 'clock', 'people', 'truck';
@for $i from 1 through length($icons) {
  .icon-#{nth($icons, $i)} {
    $image: "#{nth($icons, $i)}";
    height: icon-sprite-height($image);
    width: icon-sprite-width($image);
  }
}

$logos: 'large', 'small';
@for $i from 1 through length($logos) {
  .logo-#{nth($logos, $i)} {
    $image: "#{nth($logos, $i)}";
    height: logo-sprite-height($image);
    width: logo-sprite-width($image);
  }
}

$pencils: 'large-button', 'button';
@for $i from 1 through length($pencils) {
  .pencil-#{nth($pencils, $i)} {
    $image: "#{nth($pencils, $i)}";
    height: pencil-sprite-height($image);
    width: pencil-sprite-width($image);
  }
}