{{#items}}
${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};
{{/items}}

@mixin sprite-width($sprite) {
  width: nth($sprite, 3);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 4);
}

@function sprite-width($sprite) {
  @return nth($sprite, 3);
}

@function sprite-height($sprite) {
  @return nth($sprite, 4);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 1);
  $sprite-offset-y: nth($sprite, 2);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite($sprite) {
  @include sprite-position($sprite);
  background-repeat: no-repeat;
  overflow: hidden;
  @include inline-block;
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

{{class}} {
  background-image: url('{{{escaped_image}}}');
  background-size: {{total_width}} {{total_height}};
}

{{#items}}
{{class}}{
  @include sprite(${{name}});
}
{{/items}}