Importarea fișierelor în SASS

În lucrul cu fișierele SASS uneori este necesar să transferăm codul dintr-un document .scss, dar fără a crea un clon al acestuia cu extensia .css, adică să importăm un fragment din acesta.

De exemplu, avem fișierul navbar.scss cu următorul cod:

.active {
	color: red;
}

Pentru a realiza acest tip de import mai întâi trebuie să adăugăm o liniuță de subliniere înaintea numelui fișierului, astfel: _navbar.scss. Apoi, în alt fișier style.scss scriem directiva @import, dar în numele fișierului importat liniuța de subliniere, la fel ca și extensia fișierului, nu le indicăm:

@import "navbar";

Și vedem că la compilarea în style.css s-a importat codul din fișierul _navbar.scss:

.active {
	color: red; 
}

Creați un fișier main.scss cu următorul conținut:

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

Apoi importați fragmentul acestuia în fișierul styles.scss și compilați-l în styles.css.