Gulp spritesmith как сделать цикл по иконкам?

Question

[Anton]

Есть таск.

gulp.task('sprite-create', ['sprite-clean'], function () {
	var spriteData = gulp.src('app/img/icons/*.png')//выберем откуда брать изображения для объединения в спрайт
	.pipe(spritesmith({
		imgName     : 'sprite.png', // имя спрайтового изображения
		cssName     : '_sprite.sass', // имя стиля где храним позиции изображений в спрайте
		padding     : 2,
		cssTemplate : 'app/sass/_libs/sprites_2.template.mustache'
	}));
	spriteData.img.pipe(gulp.dest('app/img/sprites/')); // путь, куда сохраняем картинку
	spriteData.css.pipe(gulp.dest('app/sass/')); // путь, куда сохраняем стили
});

Шаблон вывода
<code>{{#items}}
${{name}}: {{px.x}} {{px.y}} {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}} {{px.total_width}} {{px.total_height}} '{{{escaped_image}}}';
{{/items}}</code>

Миксин

@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(../img/sprites/#{$sprite-image})

@mixin sprite($sprite)
  @include sprite-image($sprite)
  @include sprite-position($sprite)
  @include sprite-width($sprite)
  @include sprite-height($sprite)

Не пойму как сделать цикл на вывод иконок допустим в соц блоке, пробую так

@each $s in vk, instagram, youtube
			.social__#{$s}
				+sprite(#{$s})
				&:hover
					+sprite(#{$s}_hover)
				&:active
					+sprite(#{$s}_active)

Ошибка в консоле выскакивает, не пойму, что не так делаю

Error: index out of bounds for `nth($list, $n)`
on line 13 of app/sass/_libs/_sprite_mixin.sass
>> $sprite-image: nth($sprite, 9);

Answer 1

[alvvi]

Что вы пытаетесь передать в качестве $sprite? Что бы это ни было,
$sprite-image: nth($sprite, 9)
9 итема там, судя по всему, нет. То есть length list'a меньше 9.

Comments

[Anton]

$social__youtube_hover: 52px 26px -52px -26px 24px 24px 76px 50px 'sprite.png';
Как я понял 9 - это sprite.png

[alvvi]

Anton: ах да, заметил вот
#{$s}_hover у вас вернет получается $youtube_hover
а ваш list называется $social__youtube_hover

[Anton]

Не не в этом дело ошибка сохраняется даже при таком раскладе
@each $s in vk, instagram, youtube
.social__#{$s}
+sprite(#{$s})

[alvvi]

Anton: окей, насколько я понял из гуглежа, SASS не поддерживает динамические переменные.
Можно добится похожего поведения используя map-ы, но то что вы хотите изначально в SASS не работает.

[Anton]

Спасибо за вашу помощь. Если еще и с мапами поможете вообще буду благодарен