Error compiling SASS?

Question

Sass

Hello everyone, 2 days I can not find the problem. Help smart people pliz.
Error code:
gulp-notify: [Error running Gulp] dev\base\_sprite.sass
Error: Invalid CSS after "...tesheet-sprites": expected 1 selector or at-rule, was "$1-name: '1' ;"
on line 1 of dev/base/_sprite.sass
from line 6 of dev/main.sass
>> // SASS variables are information about icon's compiled state, stored under
^

var 	gulp          = require('gulp'),
    gutil         = require('gulp-util' ),
    pug           = require('gulp-pug'),
    plumber 	  = require('gulp-plumber'),
    sass          = require('gulp-sass'),
    browsersync   = require('browser-sync'),
    concat        = require('gulp-concat'),
    uglify        = require('gulp-uglify'),
    cleancss      = require('gulp-clean-css'),
    rename        = require('gulp-rename'),
    autoprefixer  = require('gulp-autoprefixer'),
    notify        = require("gulp-notify"),
    rsync         = require('gulp-rsync'),
    spritesmith   = require('gulp.spritesmith');

gulp.task('pug', function buildHTML() {
  return gulp.src(['dev/*.pug', 'dev/page/*.pug'])
  .pipe(plumber({
    errorHandler: notify.onError(function(err){
      return {
        title: 'Pug',
        message: err.message
      }
    })
  }))
  .pipe(pug({
    pretty: true
  }))
  .pipe(gulp.dest('app/'))
  .pipe(browsersync.reload( {stream: true} ))
});
gulp.task('sass', function() {
  return gulp.src('dev/*.sass')
  .pipe(sass({ outputStyle: 'expand' }).on("error", notify.onError()))
  .pipe(rename({ suffix: '.min', prefix : '' }))
  .pipe(autoprefixer(['last 15 versions']))
  //.pipe(cleancss( {level: { 1: { specialComments: 0 } } })) // Opt., comment out when debugging
  .pipe(gulp.dest('app/css/'))
  .pipe(browsersync.reload( {stream: true} ))
});
gulp.task('js', function() {
  return gulp.src([
    'dev/_libs/jquery/dist/jquery.min.js',
    'dev/common.js', // Always at the end
    ])
  .pipe(concat('scripts.min.js'))
  .pipe(uglify()) // Mifify js (opt.)
  .pipe(gulp.dest('app/js'))
  .pipe(browsersync.reload({ stream: true }))
});

gulp.task('sprite', function () {
  var spriteData = gulp.src('app/img/icon-png/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: '_sprite.sass'
  }));

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

});
gulp.task('watch', ['pug', 'sass', 'js', 'browser-sync', 'sprite'], function() {
  gulp.watch(['dev/**/*.pug'], ['pug']);
  gulp.watch(['dev/**/**/*.sass'], ['sass']);
  gulp.watch(['dev/*.js'], ['js'])
});
gulp.task('browser-sync', function() {
  browsersync({
    server: {
      baseDir: 'app'
    },
    notify: false,
    // open: false,
    // tunnel: true,
    // tunnel: "projectmane", //Demonstration page: http://projectmane.localtunnel.me
  })
});
gulp.task('rsync', function() {
  return gulp.src('app/**')
  .pipe(rsync({
    root: 'app/',
    hostname: '[email protected]',
    destination: 'yousite/public_html/',
    // include: ['*.htaccess'], // Includes files to deploy
    exclude: ['**/Thumbs.db', '**/*.DS_Store'], // Excludes files from deploy
    recursive: true,
    archive: true,
    silent: false,
    compress: true
  }))
});
gulp.task('default', ['watch']);

main.sass

// ---------------- Base ------------------- //

@import "base/fonts"
@import "base/vars"
@import "base/libs"
@import "base/sprite"

::placeholder
  color: #666

::selection
  background-color: $accent
  color: #fff

html, body
  height: 100%

body
  font-size: 10px
  min-width: 320px
  position: relative
  line-height: 1.65
  font-family: $default-font
  overflow-x: hidden
  input, textarea
      border: #666 1px solid
      outline: none
      &:focus:required:invalid
        border-color: red
      &:required:valid
        border-color: green

// ---------------- Base ------------------- //


// ---------------- Blocks ----------------- //

//@import "page/page"


// ---------------- Blocks ----------------- //


@import "base/media" // Always at the end

_sprite.sass

// SASS variables are information about icon's compiled state, stored under its original file name
//
// .icon-home
//   width: $icon-home-width
//
// The large array-like variables contain all information about a single icon
// $icon-home: x y offset_x offset_y width height total_width total_height image_path
//
// At the bottom of this section, we provide information about the spritesheet itself
// $spritesheet: width height image $spritesheet-sprites
$1-name: '1'
$1-x: 0px
$1-y: 0px
$1-offset-x: 0px
$1-offset-y: 0px
$1-width: 50px
$1-height: 105px
$1-total-width: 206px
$1-total-height: 105px
$1-image: 'sprite.png'
$1: (0px, 0px, 0px, 0px, 50px, 105px, 206px, 105px, 'sprite.png', '1', )
$2-name: '2'
$2-x: 50px
$2-y: 0px
$2-offset-x: -50px
$2-offset-y: 0px
$2-width: 52px
$2-height: 100px
$2-total-width: 206px
$2-total-height: 105px
$2-image: 'sprite.png'
$2: (50px, 0px, -50px, 0px, 52px, 100px, 206px, 105px, 'sprite.png', '2', )
$3-name: '3'
$3-x: 102px
$3-y: 0px
$3-offset-x: -102px
$3-offset-y: 0px
$3-width: 52px
$3-height: 100px
$3-total-width: 206px
$3-total-height: 105px
$3-image: 'sprite.png'
$3: (102px, 0px, -102px, 0px, 52px, 100px, 206px, 105px, 'sprite.png', '3', )
$4-name: '4'
$4-x: 154px
$4-y: 0px
$4-offset-x: -154px
$4-offset-y: 0px
$4-width: 52px
$4-height: 100px
$4-total-width: 206px
$4-total-height: 105px
$4-image: 'sprite.png'
$4: (154px, 0px, -154px, 0px, 52px, 100px, 206px, 105px, 'sprite.png', '4', )
$spritesheet-width: 206px
$spritesheet-height: 105px
$spritesheet-image: 'sprite.png'
$spritesheet-sprites: ($1, $2, $3, $4, )
$spritesheet: (206px, 105px, 'sprite.png', $spritesheet-sprites, )

// The provided mixins are intended to be used with the array-like variables
//
// .icon-home
//   @include sprite-width($icon-home)
//
// .icon-email
//   @include sprite($icon-email)
//
// Example usage in HTML:
//   `display: block` sprite:
//   <div class="icon-home"></div>
//
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
//   // CSS
//   .icon {
//     display: inline-block;
//   }
//
//   // HTML
//   <i class="icon icon-home"></i>
@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(#{$sprite-image})

@mixin sprite($sprite)
  @include sprite-image($sprite)
  @include sprite-position($sprite)
  @include sprite-width($sprite)
  @include sprite-height($sprite)

// The `sprites` mixin generates identical output to the CSS template
//   but can be overridden inside of SASS
//
// @include sprites($spritesheet-sprites)
@mixin sprites($sprites)
  @each $sprite in $sprites
    $sprite-name: nth($sprite, 10)
    .#{$sprite-name}
      @include sprite($sprite)

Answer 1

Variable names cannot start with a number