Grunt Spritesmith SCSS Maps Moustache template

scss_maps.template.mustache

{
  // Default options
  'functions': true
}

/*
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
*/
{{#items}}
${{name}}: (
  name: '{{name}}',
  x: {{px.x}},
  y: {{px.y}},
  offset_x: {{px.offset_x}},
  offset_y: {{px.offset_y}},
  width: {{px.width}},
  height: {{px.height}},
  total_width: {{px.total_width}},
  total_height: {{px.total_height}},
  image: '{{{escaped_image}}}'
);
{{/items}}
${{spritesheet_name}}: (
  width: {{spritesheet.px.width}},
  height: {{spritesheet.px.height}},
  image: '{{{spritesheet.escaped_image}}}',
  sprites:{{#items}} ${{name}}{{/items}}
);

{{#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);
}
*/
@mixin sprite-width($sprite) {
  width: map-get($sprite, 'width');
}

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

@mixin sprite-position($sprite) {
  background-position: map-get($sprite, 'offset_x') map-get($sprite, 'offset_y');
}

@mixin sprite-image($sprite) {
  background-image: url(map-get($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 SCSS

@include sprites(map-get($spritesheet, 'sprites'));
*/
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: map-get($sprite, 'name');
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}
{{/options.functions}}