Импортиране на файлове в 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;
}