Как работать с spritesmith в проекте на SCSS?

Question

[make_dev]

Добрый день!
Пытаюсь разобраться со spritesmith и автоматической генерацией спрайтов. Очень мало руководств в интернете, и мне сложно разобраться, в связи с малым опытом.
В общем, что имеем.
Проект на SCSS + Gulp.
Руководствуясь статьей на Хабре, а также вопросом на Тостере, получила у себя в проекте следующее.

Код в Gulp-файле.

gulp.task('sprite', function() {
    var spriteData =
        gulp.src('src/img/sprite/*.*') // путь, откуда берем картинки для спрайта
            .pipe(spritesmith({
                imgName: 'sprite.png',
                cssName: '_sprite.scss',
                cssFormat: 'scss',
                algorithm: 'binary-tree',
                padding: 1,
                cssTemplate: 'scss.template.mustache',
                cssVarMap: function(sprite) {
                    sprite.name = 's-' + sprite.name
                }//
            }));

        spriteData.img.pipe(gulp.dest('src/img/')); // путь, куда сохраняем картинку
        spriteData.css.pipe(gulp.dest('src/sass/')); // путь, куда сохраняем стили
});

Код в шаблоне mustache

{{#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}}

Код в mixin-файле

@mixin spriteWidth($sprite) {
  width: nth($sprite,5);
}
@mixin spriteHeight($sprite) {
  height: nth($sprite,6);
}
@mixin spritePosition($sprite) {
  background-position: nth($sprite,3) nth($sprite,4);
}
@mixin spriteImage($sprite) {
  background-image: nth($sprite,9);
}
@mixin sprite($sprite) {
  @include spriteImage($sprite);
  @include spritePosition($sprite);
  @include spriteWidth($sprite);
  @include spriteHeight($sprite);
}

Генерируется сам спрайт и вот такой SCSS-файлик генерируется

$s-ic1-hover: 0px 0px 0px 0px 24px 24px 74px 49px 'sprite.png';
    $s-ic1: 25px 0px -25px 0px 24px 24px 74px 49px 'sprite.png';
    $s-ic2-hover: 0px 25px 0px -25px 24px 24px 74px 49px 'sprite.png';
    $s-ic2: 25px 25px -25px -25px 24px 24px 74px 49px 'sprite.png';
    $s-ic3-hover: 50px 0px -50px 0px 24px 24px 74px 49px 'sprite.png';
    $s-ic3: 50px 25px -50px -25px 24px 24px 74px 49px 'sprite.png';

И дальше мне непонятно, как использовать сам спрайт? Как его подключить?

Пыталась подключить через

.block {
      background: $s-ic1;
          }

.
Все компилится, но не подключается.
В инспекторе вот так .

Answer 1

[make_dev]

В общем, нашла ошибку.

.block {
      @include sprite($s-ic1);
}

А еще исправила ошибку в @mixin spriteImage
Для правильной генерации пути к изображению нужно писать вот так

@mixin spriteImage($sprite) {
  background-image: url( unquote('../img/' + nth($sprite,9)));
}

Comments

[Андрей Зернов]

Спасибо!

[A_Vernoy]

Помогли. Спасибо.