Есть таск.
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);
