Why is the scss sprite not working?

Question

Sprites

Building a sprite using gulp-sass and gulp-spritesmith.

gulp.task('sprite', function() {
    var spriteData =
        gulp.src('src/img/i/icons/*.*') // путь, откуда берем картинки для спрайта
            .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/')); // путь, куда сохраняем стили
});

I get _sprite.scss

$1clock-name: '1clock';
$1clock-x: 0px;
$1clock-y: 0px;
$1clock-offset-x: 0px;
$1clock-offset-y: 0px;
$1clock-width: 45px;
$1clock-height: 45px;
$1clock-total-width: 110px;
$1clock-total-height: 45px;
$1clock-image: '../i/sprite.png';
$1clock: (0px, 0px, 0px, 0px, 45px, 45px, 110px, 45px, '../i/sprite.png', '1clock', );
$2location-name: '2location';
$2location-x: 65px;
$2location-y: 0px;
$2location-offset-x: -65px;
$2location-offset-y: 0px;
$2location-width: 45px;
$2location-height: 45px;
$2location-total-width: 110px;
$2location-total-height: 45px;
$2location-image: '../i/sprite.png';
$2location: (65px, 0px, -65px, 0px, 45px, 45px, 110px, 45px, '../i/sprite.png', '2location', );
$spritesheet-width: 110px;
$spritesheet-height: 45px;
$spritesheet-image: '../i/sprite.png';
$spritesheet-sprites: ($1clock, $2location, );
$spritesheet: (110px, 45px, '../i/sprite.png', $spritesheet-sprites, );

customize icons

@import "sprite";

.icon-small {
  display: inline-block;
  width: 45px;
  height: 45px;
  background: red;
}
.icon-1-clock {
  @include sprite($1-clock);
}

After running gulp I get an error

Error in plugin 'sass'
Message:
    src\assets\sass\partials\_sprite.scss
Error: Invalid CSS after "...esheet-sprites;": expected 1 selector or at-rule, was "$1clock-name: '1clo"
        on line 1 of src/assets/sass/partials/_sprite.scss
        from line 1 of src/assets/sass/partials/_icons.scss
        from line 3 of src/assets/sass/partials/_start.scss
        from line 1 of src/assets/sass/style.scss
>> // SCSS variables are information about icon's compiled state, stored under

How to solve this problem?

Answer 1

Everything is very simple, it turns out that you cannot start a variable with a number.
Hope this helps someone.