Created
December 21, 2017 07:35
-
-
Save ginlime/06c88eaf9767b41faf620775c366ae76 to your computer and use it in GitHub Desktop.
LESS template for spritesmith with Retina/responsive support / spritesmith 用 Retina/レスポンシブ対応 LESS テンプレート
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{{#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}} | |
.sprite-width(@sprite) { | |
width: extract(@sprite, 5); | |
} | |
.sprite-height(@sprite) { | |
height: extract(@sprite, 6); | |
} | |
.sprite-position(@sprite) { | |
@sprite-offset-x: extract(@sprite, 3); | |
@sprite-offset-y: extract(@sprite, 4); | |
background-position: @sprite-offset-x @sprite-offset-y; | |
} | |
.sprite-image(@sprite) { | |
{{! DEV: We slice to trim off excess quotes on an escaped URL }} | |
@sprite-image: extract(@sprite, 9); | |
@sprite-image-bare: ~`"@{sprite-image}".slice(1, -1)`; | |
background-image: url(@sprite-image-bare); | |
} | |
.sprite(@sprite) { | |
.sprite-image(@sprite); | |
.sprite-position(@sprite); | |
.sprite-width(@sprite); | |
.sprite-height(@sprite); | |
background-repeat: no-repeat; | |
} | |
.sprite-responsive-size(@sprite) { | |
background-size: unit(extract(@sprite, 7) / extract(@sprite, 5) * 100,%) unit(extract(@sprite, 8) / extract(@sprite, 6) * 100,%); | |
} | |
.sprite-responsive-position(@sprite) { | |
background-size: unit(extract(@sprite, 1) / (extract(@sprite, 7) - extract(@sprite, 5)) * 100,%) unit(extract(@sprite, 2) / (extract(@sprite, 8) - extract(@sprite, 6)) * 100,%); | |
} | |
.sprite-responsive(@sprite) { | |
.sprite-image(@sprite); | |
.sprite-responsive-size(@sprite); | |
.sprite-responsive-position(@sprite); | |
background-repeat: no-repeat; | |
&:after { | |
content: ''; | |
display: block; | |
padding-top: unit(extract(@sprite, 6) / extract(@sprite, 5) * 100,%); | |
} | |
} | |
{{/if}} | |
{{/block}} | |
{{#block "sprite-functions-comment"}} | |
{{#if options.functions}} | |
// Retina 対応の css sprite mixin | |
{{/if}} | |
{{/block}} | |
{{#block "sprite-functions"}} | |
{{#if options.functions}} | |
.sprite-retina-width(@sprite) { | |
width: extract(@sprite, 5) / 2; | |
} | |
.sprite-retina-height(@sprite) { | |
height: extract(@sprite, 6) / 2; | |
} | |
.sprite-retina-position(@sprite) { | |
@sprite-offset-x: extract(@sprite, 3) / 2; | |
@sprite-offset-y: extract(@sprite, 4) / 2; | |
background-position: @sprite-offset-x @sprite-offset-y; | |
} | |
.sprite-retina-image(@sprite) { | |
@sprite-image: extract(@sprite, 9); | |
@sprite-image-bare: ~`"@{sprite-image}".slice(1, -1)`; | |
background-image: url(@sprite-image-bare); | |
} | |
.sprite-retina-size(@sprite) { | |
background-size: extract(@sprite, 7)/2 extract(@sprite, 8)/2; | |
} | |
.sprite-retina(@sprite) { | |
.sprite-retina-image(@sprite); | |
.sprite-retina-position(@sprite); | |
.sprite-retina-width(@sprite); | |
.sprite-retina-height(@sprite); | |
.sprite-retina-size(@sprite); | |
background-repeat: no-repeat; | |
} | |
.sprite-retina-responsive-size(@sprite) { | |
background-size: unit((extract(@sprite, 7) / 2) / (extract(@sprite, 5) / 2) * 100,%) unit((extract(@sprite, 8) / 2) / (extract(@sprite, 6) / 2) * 100,%); | |
} | |
.sprite-retina-responsive-position(@sprite) { | |
background-position: unit((extract(@sprite, 1) / 2) / ((extract(@sprite, 7) / 2) - (extract(@sprite, 5) / 2)) * 100,%) unit((extract(@sprite, 2) / 2) / ((extract(@sprite, 8) / 2) - (extract(@sprite, 6) / 2)) * 100,%); | |
} | |
.sprite-retina-responsive(@sprite) { | |
.sprite-retina-image(@sprite); | |
.sprite-retina-responsive-size(@sprite); | |
.sprite-retina-responsive-position(@sprite); | |
background-repeat: no-repeat; | |
&:after { | |
content: ''; | |
display: block; | |
padding-top: unit(extract(@sprite, 6) / extract(@sprite, 5) * 100,%); | |
} | |
} | |
{{/if}} | |
{{/block}} | |
{{#block "spritesheet-functions"}} | |
{{#if options.functions}} | |
.sprites(@sprites, @i: 1) when (@i <= length(@sprites)) { | |
@sprite: extract(@sprites, @i); | |
@sprite-name: e(extract(@sprite, 10)); | |
.@{sprite-name} { | |
.sprite(@sprite); | |
} | |
.sprites(@sprites, @i + 1); | |
} | |
.sprites-retina(@sprites, @i: 1) when (@i <= length(@sprites)) { | |
@sprite: extract(@sprites, @i); | |
@sprite-name: e(extract(@sprite, 10)); | |
.@{sprite-name} { | |
.sprite-retina(@sprite); | |
} | |
.sprites-retina(@sprites, @i + 1); | |
} | |
{{/if}} | |
{{/block}} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment