Mixins وIncludes
أنشئ كتل أنماط قابلة لإعادة الاستخدام باستخدام @mixin، وأدرجها في أي مكان باستخدام @include.
Mixins وIncludes درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما هو Mixin؟
Mixin في Sass هو كتلة قابلة لإعادة الاستخدام من تصريحات CSS. وبخلاف الصنف العادي، يمكنه قبول معاملات، مما يجعله أكثر مرونة من النسخ واللصق. عرّفوه باستخدام @mixin، واستخدموه باستخدام @include.
Mixin أساسي
الـ mixin الذي لا يقبل معاملات هو مجرد كتلة قابلة لإعادة الاستخدام:
<div class="hero">Centered hero content</div>
Mixin مع معاملات
مرّروا قيمًا إلى mixin لتخصيص ناتجه:
<button class="btn-primary">Primary</button>
<button class="btn-danger">Danger</button>
المعاملات الافتراضية
حدّدوا قيمًا افتراضية لمعاملات mixin كي تصبح اختيارية:
<div class="card">Card with default shadow</div>
<div class="modal">Modal with custom shadow</div>
المعاملات المسماة
مرّروا معاملات mixin بأسمائها لتوضيح الغرض منها:
<div class="tooltip">Tooltip</div>
@content — Mixin مع كتلة
يمكن لـ mixins قبول كتلة من المحتوى باستخدام @content. وتُدرج الكتلة المضمّنة في الموضع الذي يظهر فيه @content:
<a href="#" class="link">Hover or focus this link</a>
<a href="#" class="link-demo">Same link, hover state shown statically</a>
Mixin متجاوب
Mixin شائع للاستعلامات الوسائطية:
<div class="sidebar">Sidebar (280px wide on desktop ≥ 1024px)</div>
Mixin للطباعة
Mixin لأنماط النصوص للحفاظ على اتساق مقياس الطباعة:
<h2 class="heading">Heading text style</h2>
<p class="body">Body text style</p>
Mixin مقابل الدالة
تنتج Mixins تصريحات CSS، بينما تعيد الدوال قيمة. استخدموا mixin عندما تريدون إنتاج عدة قواعد CSS، واستخدموا دالة عندما تحتاجون إلى قيمة واحدة محسوبة.
تجنب الإفراط في استخدام Mixins
يؤدي الإفراط في استخدام mixins إلى إنشاء تجريدات غير مباشرة يصعب تصحيحها. أنشئوا mixin فقط إذا تكرر النمط 3 مرات أو أكثر. أما الأنماط المستخدمة مرة واحدة، فاكتبوا CSS لها مباشرةً.
تحقق سريع
ما الغرض من @content داخل تعريف Sass mixin؟
خلاصة
عرّفوا mixins باستخدام @mixin، واستخدموها باستخدام @include. تقبل mixins معاملات ذات قيم افتراضية اختيارية. يتيح @content للجهات المستدعية إدراج كتل CSS داخل mixin، مما يتيح أنماطًا مغلّفة مثل مساعدات الاستعلامات الوسائطية. أنشئوا mixins فقط للأنماط التي تتكرر عدة مرات لتجنب تكلفة التجريد.
الأسئلة الشائعة
هل درس «Mixins وIncludes» مجاني؟
نعم — نص درس «Mixins وIncludes» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «Mixins وIncludes»؟
أنشئ كتل أنماط قابلة لإعادة الاستخدام باستخدام @mixin، وأدرجها في أي مكان باستخدام @include. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «Mixins وIncludes»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.