Ошиба
scss\_sprite_png.scss
Error: index out of bounds for `nth($list, $n)`
on line 904 of scss/_sprite_png.scss
>> $sprite-image: nth($sprite, 9);
-----------------^
Конфиг Gulp
gulp.task('sprite:png', function() {
var spriteData = gulp.src(development + 'img/icons/*.png')
.pipe(spritesmith({
imgName: 'icons.png',
cssName: '_sprite_png.scss',
imgPath: '../img/icons.png',
cssFormat: 'scss',
padding: 4,
// algorithm: 'top-down',
// cssTemplate: config.src.helpers + '/sprite.template.mustache'
}));
spriteData.img.pipe(gulp.dest(development + 'img/'));
spriteData.css.pipe(gulp.dest(development + 'scss/'));
});
генерируемый файл
$upload-name: 'upload';
$upload-x: 408px;
$upload-y: 204px;
$upload-offset-x: -408px;
$upload-offset-y: -204px;
$upload-width: 16px;
$upload-height: 16px;
$upload-total-width: 568px;
$upload-total-height: 552px;
$upload-image: '../img/icons.png';
$upload: (408px, 204px, -408px, -204px, 16px, 16px, 568px, 552px, '../img/icons.png', 'upload', );
$vip-name: 'vip';
$vip-x: 534px;
$vip-y: 313px;
$vip-offset-x: -534px;
$vip-offset-y: -313px;
$vip-width: 30px;
$vip-height: 20px;
$vip-total-width: 568px;
$vip-total-height: 552px;
$vip-image: '../img/icons.png';
$vip: (534px, 313px, -534px, -313px, 30px, 20px, 568px, 552px, '../img/icons.png', 'vip', );
$spritesheet-width: 568px;
$spritesheet-height: 552px;
$spritesheet-image: '../img/icons.png';
$spritesheet-sprites: ($add-big-green, $arr-back, $arr-circle-left, $arr-circle-right, $arr-down-dropdwon, $arr-down-gray, $arr-down-user-menu, $arr-right-arrow-small, $arr-up-blue, $arr-up-gray, $arrows, $balloon-triangle, $bonuse-big-3, $bonuse-small-4, $bonuse-small-5, $bonuse-small-6, $check, $close, $delete-cross-black, $delete-cross-gray, $delete-trash, $edit, $error, $first-tab, $flag, $forward, $gift-big-orange, $gold-account-img, $gold-bonus, $heart-white, $icon-arrow-right, $icon-calendar, $icon-check-white, $icon-check, $icon-counter-arrow, $icon-dropdown, $img4, $info, $location, $logo, $move-up, $move, $nav-ads-active, $nav-ads-pass, $nav-adv-active, $nav-adv-pass, $nav-balance-active, $nav-balance-pass, $nav-messages-active, $nav-messages-pass, $nav-profile-active, $nav-profile-pass, $ok, $panel-big-blue, $pause-circle, $pause, $payment-bank-cards, $payment-qiwi, $payment-webmoney, $payment-ya-dengi, $photo-big-blue, $refresh, $renew-gray, $renew, $rocket-big-blue, $search, $select-arrow, $svjaznoj, $table-edit-gray, $table-edit, $table-upload-gray, $table-upload, $time-big-green, $uncheck, $up-ads-green, $upload, $vip, );
$spritesheet: (568px, 552px, '../img/icons.png', $spritesheet-sprites, );
// 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;
// }
//
// // HTML
// <i class="icon icon-home"></i>
@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);
}
// The `sprites` mixin generates identical output to the CSS template
// but can be overridden inside of SCSS
//
// @include sprites($spritesheet-sprites);
@mixin sprites($sprites) {
@each $sprite in $sprites {
$sprite-name: nth($sprite, 10);
.#{$sprite-name} {
@include sprite($sprite);
}
}
}