Fájlok importálása SASS-ban

A SASS fájlokkal való munka során gyakran szükséges kódot áthelyezni egy .scss dokumentumból, anélkül, hogy létrehoznánk annak .css kiterjesztésű klónját, azaz egy fragmentumát importálni.

Például van egy navbar.scss fájlunk a következő kóddal:

.active {
	color: red;
}

Ahhoz, hogy egy ilyen típusú importot hajthassunk végre, először egy aláhúrást kell hozzáadnunk a fájlnév elé, így: _navbar.scss. Majd egy másik style.scss fájlba felvesszük a @import direktívát, de az importálandó fájl nevében az aláhúzást, akárcsak a fájl kiterjesztését nem tüntetjük fel:

@import "navbar";

És látjuk, hogy a fordítás után a style.css fájlban megjelent a _navbar.scss fájl kódja:

.active {
	color: red; 
}

Hozz létre egy main.scss fájlt a következő tartalommal:

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

Ezután importáld a fragmentumát a styles.scss fájlba és fordítsd le styles.css fájlba.