การนำเข้าแบบซ้อนใน SASS

โดยปกติแล้ว @import จะถูกใช้ตอนต้นของเอกสาร แต่โปรเซสเซอร์ SASS อนุญาตให้นำเข้าไฟล์ ในส่วนใดก็ได้ของไฟล์ที่เราต้องการ แม้กระทั่ง ภายในตัวเลือก

ลองพิจารณาตัวอย่างต่อไปนี้:

.active {
	color: blue;
}

จากนั้นนำเข้าไฟล์นั้นในไฟล์ style.scss:

div {
	@import "main";
}

ตอนนี้มาดูผลลัพธ์ของการคอมไพล์:

div .active {
	color: blue; 
}

สร้างไฟล์ navbar.scss ที่มีเนื้อหาดังต่อไปนี้:

.link {
	color: red;
	font-size: 12px;
}

จากนั้นนำเข้าส่วนนี้ลงใน บล็อก #main ของไฟล์ styles.scss และทำการคอมไพล์ เป็น styles.css