How to work with spritesmith in a SCSS project?

Question

css

Good afternoon!
I'm trying to figure out spritesmith and automatic sprite generation. There are very few guides on the Internet, and it's hard for me to figure it out, due to my little experience.
In general, what we have.
SCSS + Gulp project.
Guided by an article on Habré , as well as a question on Toaster , I received the following in my project.
Code in Gulp file.

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/')); // путь, куда сохраняем стили
});

Code in mustache template

{{#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 in the mixin file

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

The sprite itself is generated and such a SCSS file is generated

$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';

And then it's not clear to me how to use the sprite itself? How to connect it?
Tried to connect via

.block {
      background: $s-ic1;
          }

.
Everything compiles but doesn't connect.
In the inspector like this .

Answer 1

In general, I found an error.

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

I also fixed a bug in @mixin spriteImage
For the correct generation of the path to the image, you need to write like this

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