محددات Extend وPlaceholder

يتيح @extend لمحدد أن يرث جميع أنماط محدد آخر. وبدلًا من تكرار الشيفرة، ينشئ التمديد مجموعة قواعد مشتركة في CSS المجمّع.

يعرّف محدد placeholder، الذي تسبقه %، كتلةً من الأنماط لا تُجمّع بمفردها، بل فقط عند تمديدها. ولا ينتج أي CSS ما لم يمدده شيء.

يضيف تمديد صنف حقيقي سياق المحدد الكامل لذلك الصنف إلى الناتج المجمّع. أما Placeholders فهي أنظف، إذ تنتج محددات مجمّعة فقط للمحددات التي تمددها.

عندما تمدد عدة محددات placeholder نفسها، يجمعها Sass في قاعدة مفصولة بفواصل:

لدى @extend قيود مهمة:

• لا يمكن استخدامه داخل الاستعلامات الوسائطية
• قد ينتج محددات مجمّعة كبيرة وغير متوقعة عند حدوث سلاسل من عمليات التمديد
• يجعل تتبع CSS المجمّع إلى الملفات المصدرية أكثر صعوبة

مقارنة:

• @extend: CSS أصغر حجمًا بفضل القواعد المشتركة، لكنه يسبب سلاسل محددات معقدة وقيودًا داخل الاستعلامات الوسائطية
• @mixin: يكرر التصريحات، لكنه أكثر قابلية للتوقع ويمكن استخدامه داخل الاستعلامات الوسائطية

في ممارسات Sass الحديثة، يُفضّل استخدام mixins عمومًا على @extend. تجعل HTTP/2 وضغط gzip تكرار التصريحات أقل أهمية، بينما تفوق سهولة تصحيح mixins الفرق المحدود في حجم CSS.

يكون @extend، مع placeholders، مناسبًا عندما:

• تشترك عدة محددات فعلًا في الحالة الدلالية نفسها، مثل حالات الخطأ
• لا تكونون داخل استعلام وسائط
• تكون الأنماط الأساسية مستقرة ومحددة جيدًا

تعمل Placeholders جيدًا مع مجموعات الأدوات المساعدة الشبيهة بإعادة الضبط، التي ترثها عدة مكوّنات:

تحظر بعض أدلة الأنماط والفرق استخدام @extend بالكامل بسبب تعقيده وتضخم المحددات الذي قد يسببه. تعرّفوا على المفاضلات واتبعوا اصطلاحات فريقكم.

ما الفرق بين تمديد صنف عادي وتمديد محدد placeholder (%)؟

يتيح @extend لمحدد أن يرث أنماط محدد آخر، مع تجميع المحددات في CSS المجمّع. تُجمّع Placeholders (%name) إلى لا شيء حتى يتم تمديدها، وهي أنظف من تمديد الأصناف الحقيقية. تجنبوا استخدام @extend داخل الاستعلامات الوسائطية. وفي Sass الحديث، يُفضّل استخدام mixins عمومًا على @extend لأنها أكثر قابلية للتوقع وأسهل في التصحيح.