scss в css (vs code)

Верстаю сайт (html, scss css), столкнулся с такой проблемой: при записи scss и последующей компиляции в css не учитывается отношение между родительским и дочерним элементом. После просмотра документации на сайте/ютуб/статьях на форумах и попытке редактировать настройки изменений не произошло. Пример даю на скриншоте. Установлены расширения: scss formatter, scss intellisense, live sass compiler, html to css scss less, acsstractor, autoprefixer. Скажите пожалуйста, находится ли моя ошибка в настройках текстового редактора или в возможностях языка? Как корректно настроить эту функцию дабы сразу переводить в css, а так же как быстро копировать классы с html для scss? Буду рад любому совету, ссылке на ресурс или подсказке где еще я могу найти материал для решения проблемы. Всем спасибо!

(символ родителя менял несколько раз как в левой части так и в правой, ничего не происходит)