CSS Academy · درس

متغيرات CSS لتنسيق السمات

أنشئ نظام سمات قائمًا على الرموز باستخدام خصائص CSS المخصصة التي تتبدل بين قيم الوضعين الفاتح والداكن.

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

نظرة عامة على بنية السمات

تُعدّ الخصائص المخصّصة في CSS أساس إنشاء السمات الحديثة باستخدام CSS. فهي تعمل كطبقة رموز مميزة حيّة يمكن تبديلها أثناء التشغيل، مما يتيح الوضع الداكن، ووضع العلامة البيضاء، والتخصيص الذي يتحكّم فيه المستخدم.

طبقات رموز التصميم

يتكوّن نظام السمات المنظّم جيدًا من ثلاث طبقات:

الرموز المميزة البدائية: قيم خام (--blue-500: #3b82f6)
الرموز المميزة الدلالية: قائمة على المعنى (--color-primary: var(--blue-500))
رموز مميزة للمكوّنات: خاصة بالمكوّن (--button-bg: var(--color-primary))

تعريف السمة الفاتحة

عرّفوا السمة الفاتحة كاملةً على :root:

<div class="demo">Themed surface<br/><button class="btn">Primary Button</button></div>

تجاوز السمة الداكنة

تجاوزوا الرموز المميزة ضمن نطاق داكن، سواء باستخدام استعلام وسائط أو فئة:

<div class="demo">Adapts to dark mode automatically</div>

استخدام الرموز المميزة في المكوّنات

تستخدم المكوّنات الرموز المميزة الدلالية، ولا تستخدم قيمًا مضمّنة في الشيفرة مطلقًا:

<div class="card">Card using theme tokens</div>

التجاوز القائم على الفئة

اسمحوا بالتجاوز اليدوي عبر فئة على <html>:

<div data-theme="dark" class="demo">Dark theme via data-theme</div>
<div data-theme="light" class="demo">Light theme via data-theme</div>

إنشاء السمات على مستوى المكوّن

يمكن للمكوّن تعريف طبقة الرموز المميزة الخاصة به لإتاحة تخصيص أعمق:

<div class="card">Component-level theming</div>

إنشاء سمات للعلامة البيضاء

تتيح متغيرات CSS إنشاء منتجات للعلامة البيضاء، بحيث يحصل كل عميل على سمة مختلفة من خلال تجاوز مجموعة صغيرة من رموز العلامة التجارية المميزة:

<div data-brand="client-a" class="brand-demo">Client A brand color</div>
<div data-brand="client-b" class="brand-demo">Client B brand color</div>

انتقالات تغييرات السمة

يمكن تحقيق انتقالات سلسة بين السمات باستخدام انتقال CSS على الخصائص المرتبطة بالألوان:

<div class="demo" id="theme-demo">Themed content</div>
<button onclick="document.documentElement.classList.toggle('theme-transitioning'); const d=document.getElementById('theme-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff';">Toggle Theme (transitions smoothly)</button>

توثيق الرموز المميزة

وثّقوا رموز التصميم المميزة حتى يعرف جميع المطوّرين المتغيرات التي ينبغي استخدامها. ويُعدّ مكوّن دليل الأنماط، مثل Storybook، الذي يعرض جميع الرموز المميزة مع قيمها في الوضعين الفاتح والداكن، ذا قيمة كبيرة للفرق الكبيرة.

أدوات الرموز المميزة: Style Dictionary

يحوّل Style Dictionary (من Amazon) رموز التصميم المميزة المعرّفة بتنسيق JSON تلقائيًا إلى خصائص مخصّصة في CSS وثوابت JavaScript وتنسيقات أخرى للمنصات، مما يحافظ على تزامن الرموز المميزة بين التصميم والشيفرة.

تحقّق سريع

في بنية للرموز المميزة ذات مستويين، ما نوع الرمز المميز الذي ينبغي أن يشير إليه المكوّن .button من أجل لون الخلفية؟

مراجعة

تمنح متغيرات CSS أنظمة السمات المتينة القدرة على العمل. أنشئوا ثلاث طبقات: الرموز المميزة البدائية، والرموز المميزة الدلالية، ورموز المكوّنات المميزة. عرّفوا السمات باعتبارها تجاوزات للرموز المميزة على :root باستخدام استعلام وسائط أو محدد سمات. استخدموا الرموز المميزة الدلالية في المكوّنات لوراثة السمة تلقائيًا. وتعمل أدوات مثل Style Dictionary على أتمتة توزيع الرموز المميزة عبر المنصات.

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

هل درس «متغيرات CSS لتنسيق السمات» مجاني؟

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

ماذا ستتعلم في «متغيرات CSS لتنسيق السمات»؟

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

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

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

كم من الوقت يستغرق درس «متغيرات CSS لتنسيق السمات»؟

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

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

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

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

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