Why doesn't gulp sass compile nested pseudo-classes and pseudo-elements?

Question

Sass

gulpfile.js

var gulp 		 = require('gulp'),
    sass 		 = require('gulp-sass');
gulp.task('sass', function(){
  return gulp.src('app/sass/**/*.scss')
    .pipe(sass()) 
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({stream: true}))
});

code in scss

.nav__item {
  color: #aaa;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-right: 70px;

  $:hover {
  color: #111;
  }	
}

I get an answer

Error: app\sass\_nav.scss
Error: Invalid CSS after "...in-right: 70px;": expected "}", was "$:hover {"
        on line 29 of app/sass/_nav.scss
        from line 4 of app/sass/main.scss
>>      margin-right: 70px;

Answer 1

Not $:hover but &:hover
The $ sign is a variable