การนำเข้าไฟล์ใน 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