Compass sprite icons generator

sprite-icons-output.css

.icon {
  margin: 0 5px 0 0;
  background: url('/imgs/icons-s4dee938f6c.png') no-repeat;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}

.icon.backup {
  background-position: 0 0;
  height: 26px;
  width: 27px;
}

.icon.centr-dashboard {
  background-position: 0 -31px;
  height: 26px;
  width: 27px;
}

.icon.encryption {
  background-position: 0 -62px;
  height: 61px;
  width: 67px;
}

.icon.man-sharing {
  background-position: 0 -128px;
  height: 55px;
  width: 57px;
}

.icon.priv-encryption {
  background-position: 0 -188px;
  height: 55px;
  width: 73px;
}

.icon.remote-wipe {
  background-position: 0 -248px;
  height: 26px;
  width: 27px;
}

.icon.remote-wipes {
  background-position: 0 -279px;
  height: 54px;
  width: 75px;
}

.icon.reports {
  background-position: 0 -338px;
  height: 26px;
  width: 27px;
}

.icon.revised-backup {
  background-position: 0 -369px;
  height: 55px;
  width: 58px;
}

.icon.sync-acr {
  background-position: 0 -429px;
  height: 65px;
  width: 81px;
}

.icon.sync {
  background-position: 0 -499px;
  height: 26px;
  width: 27px;
}

.icon.teamshare {
  background-position: 0 -530px;
  height: 26px;
  width: 27px;
}

sprite-icons.scss

// Author Giuseppe Cinquemani

//
// Icons $variables and @mixins
//

// Compass @imports

@import "compass/css3/inline-block",
		"compass/utilities/sprites";

// 
// .icons variables
//

$disable-magic-sprite-selectors: true;

$default-icons-dir: "icons" !default; // Default icons directory.
$default-icons-spacing: 5px !default; // Default spaces between icons.
$default-icons-margin: 0 0 10px 0 !default; // Default margins.

// 
// .icons @mixin
//

@mixin icons($sprite-path, $sprite-spacing, $sprite-margin, $sprite-inline-block: true, $sprite-has-hover: false) {
    $icons-map: sprite-map("#{$sprite-path}/*.png", $spacing:$sprite-spacing); // Sprite map.
    $icons-classes: sprite-names($icons-map); // Images files names.

 	@if $sprite-has-hover { $disable-magic-sprite-selectors: false; } // :hover, :active, :focus event support.

    margin: $sprite-margin;
    background: $icons-map no-repeat;
    @if $sprite-inline-block { @include inline-block; }
	
    @for $i from 1 through length($icons-classes) {
	    &.#{nth($icons-classes, $i)} {
			@include sprite($icons-map, #{nth($icons-classes, $i)});
			@include sprite-dimensions($icons-map, nth($icons-classes, $i));
	    }
    }
}

.icon { @include icons($default-icons-dir, $default-icons-spacing, $default-icons-margin); } // @include icons @mixin.