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