ตัวเลือก Extend และ Placeholder

@extend ช่วยให้ตัวเลือกหนึ่งสืบทอดสไตล์ทั้งหมดจากอีกตัวเลือกหนึ่ง แทนที่จะทำซ้ำโค้ด การขยายจะสร้างชุดกฎที่ใช้ร่วมกันใน CSS หลังคอมไพล์

ตัวเลือกตัวยึด (มี % เป็นคำนำหน้า) ใช้กำหนดบล็อกสไตล์ที่ไม่ถูกคอมไพล์โดยลำพัง แต่จะถูกคอมไพล์เมื่อมีการขยายเท่านั้น หากไม่มีสิ่งใดขยายตัวเลือกนี้ ก็จะไม่สร้าง CSS

การขยายคลาสจริงจะเพิ่มบริบทตัวเลือกทั้งหมดของคลาสนั้นลงในผลลัพธ์หลังคอมไพล์ ตัวยึดจึงสะอาดกว่า เพราะจะสร้างตัวเลือกที่จัดกลุ่มไว้เฉพาะสำหรับตัวเลือกที่ขยายเท่านั้น

เมื่อตัวเลือกหลายตัวขยายตัวยึดเดียวกัน Sass จะจัดกลุ่มตัวเลือกเหล่านั้นเป็นกฎที่คั่นด้วยจุลภาค:

@extend มีข้อจำกัดสำคัญ:

• ไม่สามารถใช้ภายในคิวรีสื่อได้
• อาจสร้างตัวเลือกที่จัดกลุ่มขนาดใหญ่และไม่คาดคิดเมื่อเกิดการขยายต่อกันหลายชั้น
• ทำให้ติดตาม CSS หลังคอมไพล์กลับไปยังไฟล์ต้นฉบับได้ยากขึ้น

การเปรียบเทียบ:

• @extend: CSS มีขนาดเล็กกว่าเนื่องจากใช้กฎร่วมกัน แต่มีสายโซ่ตัวเลือกที่ซับซ้อนและมีข้อจำกัดด้านคิวรีสื่อ
• @mixin: ทำซ้ำการประกาศ แต่คาดเดาพฤติกรรมได้มากกว่าและใช้ภายในคิวรีสื่อได้

ในการใช้ Sass สมัยใหม่ โดยทั่วไปมักเลือกใช้มิกซ์อินมากกว่า @extend HTTP/2 และการบีบอัด gzip ทำให้การทำซ้ำการประกาศมีความสำคัญน้อยลง ขณะที่ความง่ายในการแก้จุดบกพร่องของมิกซ์อินมีประโยชน์มากกว่าความแตกต่างด้านขนาด CSS เพียงเล็กน้อย

@extend (พร้อมตัวยึด) เหมาะสมเมื่อ:

• ตัวเลือกหลายตัวมีสถานะเชิงความหมายเดียวกันจริง ๆ เช่น สถานะข้อผิดพลาด
• ไม่ได้อยู่ภายในคิวรีสื่อ
• สไตล์พื้นฐานมีความคงที่และกำหนดไว้อย่างชัดเจน

ตัวยึดเหมาะกับชุดยูทิลิตีลักษณะการรีเซ็ตที่หลายคอมโพเนนต์สืบทอดไปใช้:

คู่มือสไตล์และทีมงานบางแห่งห้ามใช้ @extend โดยสิ้นเชิง เนื่องจากความซับซ้อนและการทำให้ตัวเลือกมีขนาดใหญ่เกินไปซึ่งอาจเกิดขึ้นได้ ควรทำความเข้าใจข้อแลกเปลี่ยนและปฏิบัติตามแนวทางของทีม

การขยายคลาสทั่วไปแตกต่างจากการขยายตัวเลือกตัวยึด (%) อย่างไร

@extend ช่วยให้ตัวเลือกสืบทอดสไตล์ของอีกตัวเลือกหนึ่ง และจัดกลุ่มตัวเลือกใน CSS หลังคอมไพล์ ตัวยึด (%name) จะไม่ถูกคอมไพล์จนกว่าจะมีการขยาย จึงสะอาดกว่าการขยายคลาสจริง ควรหลีกเลี่ยง @extend ภายในคิวรีสื่อ ใน Sass สมัยใหม่ โดยทั่วไปมักเลือกใช้มิกซ์อินมากกว่า @extend เพราะคาดเดาพฤติกรรมและแก้จุดบกพร่องได้ง่ายกว่า