sass.template.mustache

{
  // Default options
  'functions': true
}

/*
  SASS variables are information about icon's compiled state, stored under its original file name

  .icon-home
    width: $icon-home-width

  The large array-like variables contain all information about a single icon
  $icon-home: x y offset_x offset_y width height total_width total_height image_path

  At the bottom of this section, we provide information about the spritesheet itself
  $spritesheet: width height image $spritesheet-sprites
  */
{{#items}}
${{name}}-name: '{{name}}'
${{name}}-x: {{px.x}}
${{name}}-y: {{px.y}}
${{name}}-offset-x: {{px.offset_x}}
${{name}}-offset-y: {{px.offset_y}}
${{name}}-width: {{px.width}}
${{name}}-height: {{px.height}}
${{name}}-total-width: {{px.total_width}}
${{name}}-total-height: {{px.total_height}}
${{name}}-image: '{{{escaped_image}}}'
${{name}}: {{px.x}} {{px.y}} {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}} {{px.total_width}} {{px.total_height}} '{{{escaped_image}}}' '{{name}}'
{{/items}}
${{spritesheet_name}}-width: {{spritesheet.px.width}}
${{spritesheet_name}}-height: {{spritesheet.px.height}}
${{spritesheet_name}}-image: '{{{spritesheet.escaped_image}}}'
${{spritesheet_name}}-sprites:{{#items}} ${{name}}{{/items}}
${{spritesheet_name}}: {{spritesheet.px.width}} {{spritesheet.px.height}} '{{{spritesheet.escaped_image}}}' ${{spritesheet_name}}-sprites

{{#options.functions}}
/*
  The provided mixins are intended to be used with the array-like variables

  .icon-home
    @include sprite-width($icon-home)

  .icon-email
    @include sprite($icon-email)
  */
@mixin sprite-width($sprite)
  width: nth($sprite, 5)

@mixin sprite-height($sprite)
  height: nth($sprite, 6)

@mixin sprite-position($sprite)
  $sprite-offset-x: nth($sprite, 3)
  $sprite-offset-y: nth($sprite, 4)
  background-position: $sprite-offset-x  $sprite-offset-y

@mixin sprite-image($sprite)
  $sprite-image: nth($sprite, 9)
  background-image: url(../img/#{$sprite-image})

@mixin sprite($sprite)
  @include sprite-image($sprite)
  @include sprite-position($sprite)
  @include sprite-width($sprite)
  @include sprite-height($sprite)

/*
  The `sprites` mixin generates identical output to the CSS template
    but can be overridden inside of SASS

  @include sprites($spritesheet-sprites)
  */
@mixin sprites($sprites)
  @each $sprite in $sprites
    $sprite-name: nth($sprite, 10)
    .#{$sprite-name}
      @include sprite($sprite)
{{/options.functions}}