SCSS template for spritesmith with Retina/responsive support / spritesmith 用 Retina/レスポンシブ対応 SCSS テンプレート

spritesmith_template_scss.txt

{{#block "sprites"}}
{{#each sprites}}
${{strings.name_name}}: '{{name}}';
${{strings.name_x}}: {{px.x}};
${{strings.name_y}}: {{px.y}};
${{strings.name_offset_x}}: {{px.offset_x}};
${{strings.name_offset_y}}: {{px.offset_y}};
${{strings.name_width}}: {{px.width}};
${{strings.name_height}}: {{px.height}};
${{strings.name_total_width}}: {{px.total_width}};
${{strings.name_total_height}}: {{px.total_height}};
${{strings.name_image}}: '{{{escaped_image}}}?__NOCACHE__';
${{strings.name}}: ({{px.x}}, {{px.y}}, {{px.offset_x}}, {{px.offset_y}}, {{px.width}}, {{px.height}}, {{px.total_width}}, {{px.total_height}}, '{{{escaped_image}}}?__NOCACHE__', '{{name}}', );
{{/each}}
{{/block}}
{{#block "spritesheet"}}
${{spritesheet_info.strings.name_width}}: {{spritesheet.px.width}};
${{spritesheet_info.strings.name_height}}: {{spritesheet.px.height}};
${{spritesheet_info.strings.name_image}}: '{{{spritesheet.escaped_image}}}';
${{spritesheet_info.strings.name_sprites}}: ({{#each sprites}}${{strings.name}}, {{/each}});
${{spritesheet_info.strings.name}}: ({{spritesheet.px.width}}, {{spritesheet.px.height}}, '{{{spritesheet.escaped_image}}}', ${{spritesheet_info.strings.name_sprites}}, );
{{/block}}
{{#block "sprite-functions-comment"}}
{{#if options.functions}}
// css sprite mixin
{{/if}}
{{/block}}
{{#block "sprite-functions"}}
{{#if options.functions}}
@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(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
  background-repeat: no-repeat;
}

@mixin sprite-responsive-size($sprite) {
  background-size: (nth($sprite, 7) / nth($sprite, 5) * 100)+0% (nth($sprite, 8) / nth($sprite, 6) * 100)+0%; 
}

@mixin sprite-responsive-position($sprite) {
  background-position: (nth($sprite, 1) / (nth($sprite, 7) - nth($sprite, 5)) * 100)+0% (nth($sprite, 2) / (nth($sprite, 8) - nth($sprite, 6)) * 100)+0%;
}

@mixin sprite-responsive($sprite) {
  @include sprite-image($sprite);
  @include sprite-responsive-size($sprite);
  @include sprite-responsive-position($sprite);
  background-repeat: no-repeat;
  &:after {
    content: '';
    display: block;
    padding-top: nth($sprite, 6) / nth($sprite, 5) * 100%;
  }
}
{{/if}}
{{/block}}
{{#block "sprite-functions-comment"}}
{{#if options.functions}}
// Retina 対応の css sprite mixin
{{/if}}
{{/block}}
{{#block "sprite-functions"}}
{{#if options.functions}}
@mixin sprite-retina-width($sprite) {
	width: nth($sprite, 5) / 2;
}

@mixin sprite-retina-height($sprite) {
	height: nth($sprite, 6) / 2;
}

@mixin sprite-retina-position($sprite) {
	$sprite-offset-x: nth($sprite, 3) / 2;
	$sprite-offset-y: nth($sprite, 4) / 2;
	background-position: $sprite-offset-x $sprite-offset-y;
}

@mixin sprite-retina-image($sprite) {
	$sprite-image: nth($sprite, 9);
	background-image: url(#{$sprite-image});
}

@mixin sprite-retina-size($sprite) {
	background-size: nth($sprite, 7)/2 nth($sprite, 8)/2;
}

@mixin sprite-retina($sprite) {
	@include sprite-retina-image($sprite);
	@include sprite-retina-position($sprite);
	@include sprite-retina-width($sprite);
	@include sprite-retina-height($sprite);
	@include sprite-retina-size($sprite);
	background-repeat: no-repeat;
}

@mixin sprite-retina-responsive-size($sprite) {
  background-size: ((nth($sprite, 7) / 2) / (nth($sprite, 5) / 2) * 100)+0% ((nth($sprite, 8) / 2) / (nth($sprite, 6) / 2) * 100)+0%; 
}

@mixin sprite-retina-responsive-position($sprite) {
  background-position: ((nth($sprite, 1) / 2) / ((nth($sprite, 7) / 2) - (nth($sprite, 5) / 2)) * 100)+0% ((nth($sprite, 2) / 2) / ((nth($sprite, 8) / 2) - (nth($sprite, 6) / 2)) * 100)+0%;
}

@mixin sprite-retina-responsive($sprite) {
  @include sprite-retina-image($sprite);
  @include sprite-retina-responsive-size($sprite);
  @include sprite-retina-responsive-position($sprite);
  background-repeat: no-repeat;
  &:after {
	  content: '';
	  display: block;
	  padding-top: nth($sprite, 6) / nth($sprite, 5) * 100%;
  }
}
{{/if}}
{{/block}}
{{#block "sprite-functions-comment"}}
{{#if options.functions}}
// Retina 対応の css sprite 関連の数値を返す関数
{{/if}}
{{/block}}
{{#block "sprite-functions"}}
{{#if options.functions}}
@function spriteRetinaWidth($sprite) {
	@return nth($sprite, 5) / 2;
}

@function spriteRetinaHeight($sprite) {
	@return nth($sprite, 6) / 2;
}

@function spriteRetinaTop($sprite) {
	@return nth($sprite, 4) / 2;
}

@function spriteRetinaLeft($sprite) {
	@return nth($sprite, 3) / 2;
}
{{/if}}
{{/block}}