{
  // Default options
  'functions': true,
  'variableNameTransforms': ['dasherize']
}

{{#block "sprites-comment"}}
// SCSS variables are information about icon's compiled state, stored under its original file name
//
// .icon-home {
//   width: map-get($icon-home, 'width');
// }
//
// At the bottom of this section, we provide information about the spritesheet itself
{{/block}}
{{#block "sprites"}}
{{#each sprites}}
${{strings.name}}: (
  {{strings.bare_name}}: '{{name}}',
  {{strings.bare_x}}: {{px.x}},
  {{strings.bare_y}}: {{px.y}},
  {{strings.bare_offset_x}}: {{px.offset_x}},
  {{strings.bare_offset_y}}: {{px.offset_y}},
  {{strings.bare_width}}: {{px.width}},
  {{strings.bare_height}}: {{px.height}},
  {{strings.bare_total_width}}: {{px.total_width}},
  {{strings.bare_total_height}}: {{px.total_height}},
  {{strings.bare_image}}: '{{{escaped_image}}}'
);
{{/each}}
{{/block}}
{{#block "spritesheet"}}
${{spritesheet_info.strings.name}}: (
  {{spritesheet_info.strings.bare_width}}: {{spritesheet.px.width}},
  {{spritesheet_info.strings.bare_height}}: {{spritesheet.px.height}},
  {{spritesheet_info.strings.bare_image}}: '{{{spritesheet.escaped_image}}}',
  {{spritesheet_info.strings.bare_sprites}}: ({{#each sprites}}${{strings.name}}, {{/each}})
);
{{/block}}

{{#block "sprite-functions-comment"}}
{{#if options.functions}}
// The provided mixins are intended to be used with variables directly
//
// .icon-home {
//   @include sprite-width($icon-home);
// }
//
// .icon-email {
//   @include sprite($icon-email);
// }
//
// Example usage in HTML:
//
// `display: block` sprite:
// <div class="icon-home"></div>
//
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
//
// // CSS
// .icon {
//   display: inline-block;
// }
//
// // HTML
// <i class="icon icon-home"></i>
{{/if}}
{{/block}}
{{#block "sprite-functions"}}
{{#if options.functions}}
@mixin sprite-width($sprite) {
  width: map-get($sprite, '{{strings.bare_width}}');
}

@mixin sprite-height($sprite) {
  height: map-get($sprite, '{{strings.bare_height}}');
}

@mixin sprite-position($sprite) {
  background-position: map-get($sprite, '{{strings.bare_offset_x}}') map-get($sprite, '{{strings.bare_offset_y}}');
}

@mixin sprite-image($sprite) {
  background-image: url(map-get($sprite, '{{strings.bare_image}}'));
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}
{{/if}}
{{/block}}

{{#block "spritesheet-functions-comment"}}
{{#if options.functions}}
// The `sprites` mixin generates identical output to the CSS template
//   but can be overridden inside of SCSS
//
// @include sprites(map-get($spritesheet, '{{strings.bare_sprites}}'));
{{/if}}
{{/block}}
{{#block "spritesheet-functions"}}
{{#if options.functions}}
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: map-get($sprite, '{{strings.bare_name}}');
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}
{{/if}}
{{/block}}