แท็ก !optional ใน @extend ใน SASS
เมื่อขยายซีเลกเตอร์ คุณอาจพบข้อผิดพลาด
เมื่อไดเรกทีฟ @extend
ทำงานไม่ถูกต้อง ตัวอย่างเช่น
หากคุณมีโค้ดต่อไปนี้:
a.info {
@extend .main;
}
หากไม่มีซีเลกเตอร์ใดที่มี .main
จะเกิดข้อผิดพลาดเมื่อคอมไพล์
ในกรณีเช่นนี้ เราจำเป็นต้องรวม
ลำดับของซีเลกเตอร์เข้าด้วยกัน
ซึ่งเราใช้ไดเรกทีฟ @extend สำหรับสิ่งนี้
นอกจากนั้น จะเกิดข้อผิดพลาดหากซีเลกเตอร์
ที่มี .main อยู่ในรูปแบบนี้:
h1.main ซึ่งอธิบายได้จากความขัดแย้ง
ระหว่าง a และ h1
ดังนั้น หากจำเป็น คุณสามารถ
อนุญาตให้ไดเรกทีฟ @extend ไม่ต้องสร้าง
ซีเลกเตอร์ใหม่ได้ โดยใช้แท็กแสดงความเป็นตัวเลือก
!optional ซึ่งเขียนไว้หลังซีเลกเตอร์ ตัวอย่างเช่น:
a.info {
@extend .main !optional;
}
