Template for renderign scss file of svgsprite library

svgsprite-scss-tmpl.mustache

{{!
  Template for rendering .scss sprite file of svg sprite library (https://github.com/jkphl/svg-sprite).
  Author: Panchenko Alexandr (github.com/panych)
  source: https://gist.github.com/panych/b83287549f77535c08e8878a2c9e9e33

  This template:
  1. Resolve issue with default padding model of svg-sprite library (https://github.com/jkphl/svg-sprite/issues/200). You have "real" margins
  2. Uses px instead of % in background-position
  3. Doesn't create ready to use classes, like `.icon-search`, but has mixin for that.

  Based on template https://github.com/jkphl/svg-sprite/issues/200#issuecomment-276524557
  
  Config example:
  
  var config = {
    shape: {spacing: {padding: 10} },
    "mode": {
        "css": {
          "render": {
              "scss": {
                dest: '_sprite-svg.scss',
                template: 'svgsprite-scss-tmpl.mustache'
              }
          }
        }
    }
  }
}}
/*

Mixins
=======

`svgsprite($shape-name)`

Usage example:

    .foo {
      @include svgsprite($image-name);
    }

will give something:

    .foo {
      background: url('../images/svg-sprite.svg') no-reapeat;
      backgorund-position: 40px 30px;
      width: 20px;
      height: 32px;
    }


`svgsprite-img` will return `background-image: url(path/to/img.svg);`

`svgsprite-bgposition($shape-name)` will return `backround-position: x y;` of the shape.

`svgsprite-size($shape-name)` will return `width`, `height`.

`svgsprite-render-classes` will render css classes with styles for each shape in the sprite. Like any casual spriter does. Example:

    @include svgsprite-redner-classes;

    // css:

    .arrow-left {
      background: url('../images/svg-sprite.svg') no-reapeat;
      backgorund-position: 40px 30px;
      width: 20px;
      height: 32px;
    }
    .arrow-right {
      background: url('../images/svg-sprite.svg') no-reapeat;
      backgorund-position: 100px 30px;
      width: 20px;
      height: 32px;
    }
*/



{{#shapes}}
{{#selector.shape}}${{#classname}}{{expression}}{{/classname}}{{^last}},{{/last}}{{/selector.shape}}: (
  name: '{{#selector.shape}}{{#classname}}{{expression}}{{/classname}}{{/selector.shape}}',
  width: {{width.inner}}px,
  height: {{height.inner}}px,
  x: ({{position.absolute.x}}px - ({{width.outer}}px - {{width.inner}}px)/2),
  y: ({{position.absolute.y}}px - ({{height.outer}}px - {{height.inner}}px)/2)
);
{{/shapes}}

$svgsprite-shapes: (
{{#shapes}}
  {{#selector.shape}}${{#classname}}{{expression}}{{/classname}}{{/selector.shape}},
{{/shapes}});


@mixin svgsprite-bgposition($img) {
  background-position: map-get($img, 'x') map-get($img, 'y');
}

@mixin svgsprite-size($img) {
  width: map-get($img, 'width');
  height: map-get($img, 'height');
}

@mixin svgsprite-img {
  background-image: url("{{{sprite}}}");
}

@mixin svgsprite($img) {
  background: url("{{{sprite}}}") no-repeat;
  @include svgsprite-bgposition($img);
  @include svgsprite-size($img);
}

@mixin svgsprite-render-classes {
  @each $shape in $svgsprite-shapes {
    .#{map-get($shape, 'name')} {
      @include svgsprite($shape);
    }
  }
}