scss.template.hbs 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. {
  2. // Default options
  3. 'functions': true,
  4. 'variableNameTransforms': ['dasherize']
  5. }
  6. {{#block "sprites"}}
  7. {{#each sprites}}
  8. ${{../spritesheet_info.strings.name}}-sprite-{{strings.name}}: ({{px.x}}, {{px.y}}, {{px.offset_x}}, {{px.offset_y}}, {{px.width}}, {{px.height}}, {{px.total_width}}, {{px.total_height}}, '{{{escaped_image}}}', '{{name}}');
  9. {{/each}}
  10. ${{spritesheet_info.strings.name}}-sprites: (
  11. {{#each sprites}}
  12. {{strings.name}}: ${{../spritesheet_info.strings.name}}-sprite-{{strings.name}},
  13. {{/each}}
  14. );
  15. {{/block}}
  16. {{#block "sprite-functions"}}
  17. {{#if options.functions}}
  18. @mixin {{spritesheet_info.strings.name}}-sprite-width($sprite) {
  19. width: nth($sprite, 5);
  20. }
  21. @mixin {{spritesheet_info.strings.name}}-sprite-height($sprite) {
  22. height: nth($sprite, 6);
  23. }
  24. @mixin {{spritesheet_info.strings.name}}-sprite-position($sprite) {
  25. $sprite-offset-x: nth($sprite, 3);
  26. $sprite-offset-y: nth($sprite, 4);
  27. background-position: $sprite-offset-x $sprite-offset-y;
  28. }
  29. @mixin {{spritesheet_info.strings.name}}-sprite-size($sprite) {
  30. background-size: nth($sprite, 7) nth($sprite, 8);
  31. }
  32. @mixin {{spritesheet_info.strings.name}}-sprite-image($sprite) {
  33. $sprite-image: nth($sprite, 9);
  34. background-image: url(#{$sprite-image});
  35. }
  36. @mixin {{spritesheet_info.strings.name}}-sprite($name) {
  37. @include {{spritesheet_info.strings.name}}-sprite-image(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
  38. @include {{spritesheet_info.strings.name}}-sprite-position(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
  39. @include {{spritesheet_info.strings.name}}-sprite-size(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
  40. @include {{spritesheet_info.strings.name}}-sprite-width(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
  41. @include {{spritesheet_info.strings.name}}-sprite-height(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
  42. background-repeat: no-repeat;
  43. }
  44. {{/if}}
  45. {{/block}}
  46. {{#block "spritesheet-functions"}}
  47. {{#if options.functions}}
  48. @mixin all-{{spritesheet_info.strings.name}}-sprites() {
  49. @each $key, $val in ${{spritesheet_info.strings.name}}-sprites {
  50. $sprite-name: nth($val, 10);
  51. .{{spritesheet_info.strings.name}}-#{$sprite-name}-sprites {
  52. @include {{spritesheet_info.strings.name}}-sprite($key);
  53. }
  54. }
  55. }
  56. {{/if}}
  57. {{/block}}