0Pricing
CSS Academy · درس

المتغيرات والتداخل والملفات الجزئية

استخدم متغيرات Sass للقيم القابلة لإعادة الاستخدام، وبادئات متداخلة لتحسين القراءة، وقسّم التعليمات البرمجية إلى ملفات جزئية.

المتغيرات والتداخل والملفات الجزئية درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما هو Sass؟

Sass (أوراق الأنماط الرائعة نحويًا) هو معالج مسبق لـ CSS يوسّع CSS بإضافة المتغيرات والتداخل وmixins والدوال وغير ذلك. تُحوّل ملفات Sass إلى CSS قياسي أثناء التجميع.

صيغتا Sass

يتوفر Sass بصيغتين للملفات:

  • .scss — صيغة فائقة متوافقة مع CSS، وهي الأكثر شيوعًا
  • .sass — صيغة تعتمد على المسافات البادئة، من دون أقواس معقوفة أو فواصل منقوطة

تغطي هذه الدورة SCSS.

متغيرات Sass

تستخدم متغيرات Sass البادئة $. وتُحسم قيمها أثناء التجميع، ولذلك فهي، بخلاف الخصائص المخصصة لـ CSS، ليست حية في المتصفح.

<button class="button">Sass Variables</button>

متغيرات Sass مقابل الخصائص المخصصة لـ CSS

الاختلافات الأساسية:

  • متغيرات Sass: تُحسم أثناء التجميع، ولا تظهر في المتصفح، ولا يمكن تغييرها أثناء التشغيل
  • الخصائص المخصصة لـ CSS: حية في المتصفح، ويمكن تغييرها باستخدام JavaScript، وتراعي التتالي

الممارسة الحديثة هي استخدامهما معًا: متغيرات Sass لمنطق وقت البناء، والخصائص المخصصة لـ CSS لتخصيص السمة أثناء التشغيل.

التداخل

يتيح Sass تداخل المحددات داخل بعضها، بما يحاكي بنية HTML. ويستخدم الناتج المجمّع محددات العناصر السلف.

<div class="card">
    <div class="card-title">Card title</div>
    <div class="card-body">Card body text</div>
  </div>

محدد الأصل &

يشير & إلى محدد الأصل، مما يتيح أنماطًا شبيهة بـ BEM ومحددات الحالات:

<button class="button">Button</button>
  <button class="button active">Active state (font-weight: bold)</button>
  <button class="button--primary">BEM modifier: button--primary</button>
  <span class="button__icon">&#128279;</span> BEM element: button__icon

تحذير بشأن عمق التداخل

تجنب التداخل لأكثر من 3 مستويات. فالتداخل العميق ينتج محددات مفرطة التخصيص ويجعل CSS هشًا. وإذا وجدتم أنفسكم تستخدمون تداخلًا عميقًا، فمن المرجح أن بنية CSS تحتاج إلى إعادة هيكلة.

أجزاء Sass

الجزء هو ملف Sass يبدأ اسمه بشرطة سفلية (_card.scss). ولا تُجمّع الأجزاء بشكل مستقل، بل يجب استيرادها إلى ملف آخر. ويمنع ذلك إنشاء ملفات CSS ناتجة غير مرغوب فيها.

@use للاستيراد

يستخدم Sass الحديث @use لاستيراد الأجزاء. ويوفر ذلك نطاقات أسماء لتجنب تعارض المتغيرات:

<h2 class="heading">Namespaced heading (t.$primary-color)</h2>

@forward للمكتبات

يعيد @forward تصدير أعضاء الوحدة، بحيث يمكن للملفات التي تستورد مكتبتكم استخدامها:

<span class="badge">Forwarded token (lib.$primary-color)</span>

@import القديم (مهجور)

توجيه @import الأقدم مهجور في Dart Sass. انقلوا التعليمات إلى @use و@forward للحصول على نطاقات أسماء وأداء أفضل.

تحقق سريع

ما محدد CSS الذي ينشئه Sass من التداخل .nav { .link { color: white; } }؟

خلاصة

تُحسم متغيرات Sass ($name) أثناء التجميع. يحاكي التداخل بنية HTML، لكن تجنبوا تجاوز 3 مستويات. يشير & إلى محدد الأصل لاستخدامه مع الفئات الكاذبة والحالات ومعدّلات BEM. تُستورد الأجزاء (_file.scss) ولا تُجمّع مباشرةً. استخدموا @use، وليس @import، لتحميل وحدات Sass بالطريقة الحديثة.

الأسئلة الشائعة

هل درس «المتغيرات والتداخل والملفات الجزئية» مجاني؟

نعم — نص درس «المتغيرات والتداخل والملفات الجزئية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «المتغيرات والتداخل والملفات الجزئية»؟

استخدم متغيرات Sass للقيم القابلة لإعادة الاستخدام، وبادئات متداخلة لتحسين القراءة، وقسّم التعليمات البرمجية إلى ملفات جزئية. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «المتغيرات والتداخل والملفات الجزئية»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. المتغيرات والتداخل والملفات الجزئية
  2. Mixins وIncludes
  3. محددات Extend وPlaceholder
  4. دوال Sass وتدفق التحكم
← العودة إلى CSS Academy