Вложенный импорт в SASS

Обычно @import используют вначале документа, но препроцессор SASS позволяет импортировать файлы в любые части нужного нам файла, в том числе и внутрь селекторов.

Рассмотрим следующий пример:

.active {
	color: blue;
}

Далее импортируем его в файл style.scss:

div {
	@import "main";
}

Теперь посмотрим на результат компиляции:

div .active {
	color: blue; 
}

Создайте файл navbar.scss со следующим содержимым:

.link {
	color: red;
	font-size: 12px;
}

Затем ипортируйте данный фрагмент в блок #main файла styles.scss и проведите компиляцию в styles.css.