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

.sprite-width(@sprite) {
  width: extract(@sprite, 3);
}

.sprite-height(@sprite) {
  height: extract(@sprite, 4);
}

.sprite-position(@sprite) {
  @sprite-offset-x: extract(@sprite, 1);
  @sprite-offset-y: extract(@sprite, 2);
  background-position: @sprite-offset-x  @sprite-offset-y;
}

.sprite(@sprite) {
  .sprite-position(@sprite);
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
  .sprite-width(@sprite);
  .sprite-height(@sprite);
}

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

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