@ziqq

Ошибка gulp.spritesmith. Как вылечить?

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 CFG
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/icons@2x.png',
            // retinaSrcFilter : development + 'img/sprite/*@2x.png',
            // retinaImgName: 'icons@2x.png'
        }));
    spriteData.img.pipe(gulp.dest(development + 'img')); // путь, куда сохраняем картинку
    spriteData.css.pipe(gulp.dest(development + 'scss/_includes')); // путь, куда сохраняем стили

});


Tempalte sprite.template.mustache'
{
	// 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}}
  • Вопрос задан
  • 245 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы