A
A
Anton2017-08-23 16:41:30
gulp.js
Anton, 2017-08-23 16:41:30

Gulp spritesmith how to cycle through icons?

There is a task.

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
@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)

I don’t understand how to make a cycle for displaying icons, let’s say in the social block, I try like this
@each $s in vk, instagram, youtube
      .social__#{$s}
        +sprite(#{$s})
        &:hover
          +sprite(#{$s}_hover)
        &:active
          +sprite(#{$s}_active)

An error pops up in the console, I don’t understand what I’m doing wrong
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 the question

In order to leave comments, you need to log in

1 answer(s)
A
alvvi, 2017-08-23
@alvvi

What are you trying to pass as $sprite? Whatever it is,
item 9 is apparently not there. That is, the length of the list is less than 9.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question