Импортирование файлов в SASS

При работе с файлами SASS бывает необходимо перенести код из документа .scss, но без создания его клона с расширением .css, т. е. импортировать его фрагмент.

К примеру, у нас есть файл navbar.scss со следующим кодом:

navbar.scss.active {
  color: red;
}

Для того, чтобы осуществить такой вид импорта вначале нужно добавить нижнее подчеркивание перед именем файла, вот так: _navbar.scss. Затем в другой файл style.scss записываем директиву @import, но в названии импортируемого файла нижнее подчеркивание, как и расширение файла не указываем:

style.scss@import "navbar";

И видим, что у нас при компиляции в style.css импортировался код файла _navbar.scss:

style.css.active {
  color: red; 
}

main.scss.block-content {
  padding: 10px;
  margin-left: auto;
  width: 600px;
  font-size: 14px;
}