CSS Academy · درس

تصريح الخصائص المخصّصة واستخدامها

عرّف خصائص CSS المخصّصة باستخدام البادئة -- واستدعها باستخدام الدالة var()

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

ما الخصائص المخصصة في CSS؟

تتيح الخصائص المخصصة في CSS، والتي تُسمى أيضًا متغيرات CSS، تعريف قيمة قابلة لإعادة الاستخدام مرة واحدة واستخدامها في أي موضع ضمن ورقة الأنماط. وتتبع الصيغة --name: value.

تعريف الخصائص المخصصة

عرّفوا الخصائص المخصصة على أي عنصر. ويجعل تعريفها على :root متاحة على مستوى عام:

<div class="demo">Custom properties declared on :root</div>

استخدام الدالة var()

أشيروا إلى خاصية مخصصة باستخدام الدالة var():

<button>Styled Button</button>

الخصائص المخصصة موروثة

تتبع الخصائص المخصصة آلية التوارث المعتادة في CSS. وتكون الخاصية المعرّفة على عنصر أب متاحة لجميع العناصر التابعة له ما لم تُستبدل قيمتها.

<div class="card">
  <div class="card__body">Inherits --card-bg from .card</div>
</div>

قيم الخصائص المخصصة غير الصالحة

بخلاف خصائص CSS العادية، لا تؤدي قيمة الخاصية المخصصة غير الصالحة إلى تجاهل التصريح، بل تُقيَّم القيمة ببساطة كما هي. وتحدد الخاصية المستهلكة بعد ذلك ما إذا كانت القيمة صالحة.

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

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

الخصائص المخصصة في CSS حية داخل المتصفح، أي إنها تتحدث ديناميكيًا
تختفي متغيرات Sass عند الترجمة في وقت الإنشاء
يمكن تغيير الخصائص المخصصة باستخدام JavaScript
تراعي الخصائص المخصصة التتابع والتوارث

اصطلاحات التسمية

سمّوا الخصائص المخصصة وفق معناها، لا وفق قيمتها المرئية. فهذا يسهل تحديثها لاحقًا:

<p class="demo">Named --color-primary, --color-text, --size-spacing-sm</p>

النطاق العام مقابل نطاق المكوّن

عرّفوا الرموز العامة في :root، والقيم الخاصة بالمكوّن على الفئة الجذرية للمكوّن:

<div class="card">Global font-size-base + component-scoped card vars</div>

الخصائص المخصصة في calc()

تعمل الخصائص المخصصة داخل calc()، لكن يجب أن تتضمن وحدات عند استخدامها في حسابات الأبعاد:

<div class="nav">Navbar (var(--nav-height))</div>
<div class="main-content">Main content fills the rest via calc()</div>

الخصائص المخصصة المتجاوبة

غيّروا قيم الخصائص المخصصة داخل استعلامات الوسائط لإنشاء أنظمة رموز متجاوبة:

<div class="section">Padding grows to 6rem on wide screens</div>

الخصائص المخصصة للتحريك

حرّكوا العناصر بتغيير خاصية مخصصة، غالبًا عبر JavaScript، بدلًا من تغيير عدة خصائص فردية:

<div class="progress-track">
  <div class="progress"></div>
</div>

تحقق سريع

كيف تعرّفون خاصية CSS مخصصة عامة باسم --accent؟

مراجعة

تُعرّف الخصائص المخصصة في CSS باستخدام --name: value، ويُستفاد منها باستخدام var(--name). عرّفوا الرموز العامة على :root، وحددوا نطاق قيم المكوّنات باستخدام محددات المكوّنات. وهذه الخصائص حية، وتراعي التتابع، ويمكن تغييرها باستخدام JavaScript، مما يجعلها أقوى بكثير من متغيرات Sass.

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

هل درس «تصريح الخصائص المخصّصة واستخدامها» مجاني؟

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

ماذا ستتعلم في «تصريح الخصائص المخصّصة واستخدامها»؟

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

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

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

كم من الوقت يستغرق درس «تصريح الخصائص المخصّصة واستخدامها»؟

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

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

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

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

← العودة إلى CSS Academy