Mengimpor File dalam SASS

Saat bekerja dengan file SASS, terkadang diperlukan untuk memindahkan kode dari dokumen .scss, tetapi tanpa membuat kloningnya dengan ekstensi .css, yaitu mengimpor fragmennya.

Sebagai contoh, kita memiliki file navbar.scss dengan kode berikut:

.active {
	color: red;
}

Untuk melakukan jenis impor seperti ini, pertama-tama perlu menambahkan garis bawah sebelum nama file, seperti ini: _navbar.scss. Kemudian di file lain style.scss tulis direktif @import, tetapi dalam nama file yang diimpor, garis bawah, seperti halnya ekstensi file tidak ditentukan:

@import "navbar";

Dan kita lihat bahwa saat dikompilasi ke style.css, kode dari file _navbar.scss telah terimpor:

.active {
	color: red; 
}

Buat file main.scss dengan konten berikut:

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

Kemudian impor fragmennya ke file styles.scss dan kompilasilah menjadi styles.css.