การนำเข้าไฟล์ใน SASS

เมื่อทำงานกับไฟล์ SASS บางครั้งจำเป็นต้อง ย้ายโค้ดจากเอกสาร .scss แต่ โดยไม่สร้างสำเนาของมันด้วยนามสกุล .css นั่นคือ นำเข้าเพียงบางส่วนของมัน

ตัวอย่างเช่น เรามีไฟล์ navbar.scss ด้วยโค้ดต่อไปนี้:

navbar.scss.active {
  color: red;
}

เพื่อที่จะดำเนินการนำเข้าแบบนี้ ก่อนอื่นต้องเพิ่มขีดล่าง หน้าชื่อไฟล์ เช่นนี้: _navbar.scss จากนั้นในไฟล์อื่น style.scss เขียน คำสั่ง @import แต่ในชื่อ ของไฟล์ที่นำเข้า ไม่ต้องระบุขีดล่าง และนามสกุลไฟล์:

style.scss@import "navbar";

และเราจะเห็นว่าเมื่อคอมไพล์เป็น style.css โค้ดจากไฟล์ _navbar.scss ถูกนำเข้า:

style.css.active {
  color: red; 
}

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