Почему gulp sass не компилирует вложенные псевдоклассы и псевдоэлементы?

Question

[DON1986]

Файл 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}))
});

Код в scss

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

	$:hover {
	color: #111;
	}	
}

Получаю ответ

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

[hellcaster]

Не $:hover, а &:hover
Знак $ это переменная

Comments

[DON1986]

Спасибо большое! Затупил