Commit 723b8ac6 authored by Philipp Nowinski's avatar Philipp Nowinski
Browse files

[BUGFIX] overwrite sprite-template to provide sprite-width and sprite-height...

[BUGFIX] overwrite sprite-template to provide sprite-width and sprite-height functions instead of mixins
parent 1ebfac8c
...@@ -65,7 +65,8 @@ gulp.task('css:sprites', function() { ...@@ -65,7 +65,8 @@ gulp.task('css:sprites', function() {
var spriteData = gulp.src(settings.getPath() + '/' + config.directories.sprites + '/**/*.png').pipe(plugins.spritesmith({ var spriteData = gulp.src(settings.getPath() + '/' + config.directories.sprites + '/**/*.png').pipe(plugins.spritesmith({
imgName: 'sprites.png', imgName: 'sprites.png',
cssName: '_sprite.scss', cssName: '_sprite.scss',
imgPath: '/' + settings.getPath(true) + '/' + config.directories.images + '/sprites.png' imgPath: '/' + settings.getPath(true) + '/' + config.directories.images + '/sprites.png',
cssTemplate: 'sgc-core/gulp/sprites-template.handlebars'
})); }));
// Pipe image stream through image optimizer and onto disk // Pipe image stream through image optimizer and onto disk
// Default options
'functions': true,
'variableNameTransforms': ['dasherize']
{{#block "sprites-comment"}}
SCSS variables are information about icon's compiled state, stored under its original file name
.icon-home {
width: $icon-home-width;
The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;
At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
{{#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}}}';
${{}}: ({{px.x}}, {{px.y}}, {{px.offset_x}}, {{px.offset_y}}, {{px.width}}, {{px.height}}, {{px.total_width}}, {{px.total_height}}, '{{{escaped_image}}}', '{{name}}', );
{{#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}}${{}}, {{/each}});
${{}}: ({{spritesheet.px.width}}, {{spritesheet.px.height}}, '{{{spritesheet.escaped_image}}}', ${{spritesheet_info.strings.name_sprites}}, );
{{#block "sprite-functions-comment"}}
{{#if options.functions}}
The provided mixins are intended to be used with the array-like variables
.icon-home {
@include sprite-width($icon-home);
.icon-email {
@include sprite($icon-email);
Example usage in HTML:
`display: block` sprite:
<div class="icon-home"></div>
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
// CSS
.icon {
display: inline-block;
<i class="icon icon-home"></i>
{{#block "sprite-functions"}}
{{#if options.functions}}
@function sprite-width($sprite) {
@return nth($sprite, 5);
@function sprite-height($sprite) {
@return 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);
width: sprite-width($sprite);
height: sprite-height($sprite);
{{#block "spritesheet-functions-comment"}}
{{#if options.functions}}
The `sprites` mixin generates identical output to the CSS template
but can be overridden inside of SCSS
@include sprites($spritesheet-sprites);
{{#block "spritesheet-functions"}}
{{#if options.functions}}
@mixin sprites($sprites) {
@each $sprite in $sprites {
$sprite-name: nth($sprite, 10);
.#{$sprite-name} {
@include sprite($sprite);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment