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

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

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

.active {
	color: red;
}

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

@import "navbar";

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

.active {
	color: red; 
}

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

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

Затем ипортируйте его фрагмент в файл styles.scss и скомплируйте в styles.css.