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

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

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

main.scss.active {
  color: blue;
}

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

style.scssdiv {
  @import "main";
}

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

style.cssdiv .active {
  color: blue; 
}

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