Answer the question
In order to leave comments, you need to log in
gulp.spritesmith failed. How to cure?
ERORR
gulp-notify: [Error running Gulp] scss\_includes\_sprite_png.scss
Error: argument `$map` of `map-get($map, $key)` must be a map
Backtrace:
scss/_includes/_sprite_png.scss:13, in function `map-get`
scss/_includes/_sprite_png.scss:13, in function `icon-attr`
scss/_includes/_sprite_png.scss:18, in mixin `sprite`
scss/_modules/_icons.scss:136
on line 13 of scss/_includes/_sprite_png.scss
>> @return map-get($icon, $attr);
---------^
gulp.task('sprite:png', function () {
var spriteData = gulp.src(development + 'img/sprite/*.png')
.pipe(spritesmith({
imgName : 'icons.png',
cssName : '_sprite_png.scss',
imgPath : '../img/icons.png',
ccsFormat: 'scss',
padding : 4,
cssTemplate : 'scss/_helpers/sprite.template.mustache',//sprites.template.handlebars/sprites_2.template.mustache
// imgPathRetina: development + 'img/[email protected]',
// retinaSrcFilter : development + 'img/sprite/*@2x.png',
// retinaImgName: '[email protected]'
}));
spriteData.img.pipe(gulp.dest(development + 'img')); // путь, куда сохраняем картинку
spriteData.css.pipe(gulp.dest(development + 'scss/_includes')); // путь, куда сохраняем стили
});
{
// Default options
'functions': true
}
$icons: (0:0);
{{#items}}
$icons: map-merge($icons,({{name}}: (X: {{px.offset_x}}, Y:{{px.offset_y}}, W: {{px.width}}, H: {{px.height}}, TW: {{px.total_width}}, TH: {{px.total_height}}, IMG: '{{{escaped_image}}}')));
{{/items}}
{{#options.functions}}
// Gets an attribute from the sass map
@function icon-attr($icon, $attr){
$icon: map-get($icons, $icon);
@return map-get($icon, $attr);
}
@mixin sprite($iconName){
background-image: url(icon-attr($iconName, IMG));
width: icon-attr($iconName, W);
height: icon-attr($iconName, H);
background-position: icon-attr($iconName, X) icon-attr($iconName, Y);
}
@mixin sprite-position($iconName){
background-position: icon-attr($iconName, X) icon-attr($iconName, Y);
}
@mixin sprite-retina($iconName){
background-image: url(icon-attr($iconName, IMG));
$width: icon-attr($iconName, W);
$height: icon-attr($iconName, H);
width: $width/2;
height: $height/2;
$x: icon-attr($iconName, X);
$y: icon-attr($iconName, Y);
background-position: $x/2 $y/2;
$tw: icon-attr($iconName, TW) ;
$th: icon-attr($iconName, TH);
background-size: $tw/2 $th/2;
}
{{/options.functions}}
@mixin s($i){
@include sprite($i);
}
@mixin sp($i){
@include sprite-position($i);
}
@mixin sr($i){
@include sprite-retina($i);
}
//{{#items}}
//.icon-{{name}}{
// width: {{px.width}};
// height: {{px.height}};
// background-image: url('{{{escaped_image}}}');
// background-position: {{px.offset_x}} {{px.offset_y}};
//}
//{{/items}}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question