تنفيذ سمات متعددة للعلامات التجارية باستخدام متغيرات CSS
بدّل بين سمات علامات تجارية متعددة أثناء التشغيل عبر تبديل قيم خصائص CSS المخصصة.
تنفيذ سمات متعددة للعلامات التجارية باستخدام متغيرات CSS درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
نظرة عامة على بنية السمات
تربط السمات متعددة العلامات التجارية مجموعة واحدة من رموز المكوّنات المستعارة بقيم مختلفة للرموز العامة لكل علامة تجارية. تشير المكوّنات إلى الرموز المستعارة، بينما تعيد ملفات سمات العلامات التجارية تعيين الرموز المستعارة إلى رموز عامة خاصة بكل علامة.
طبقة الرموز الأساسية
عرّف الرموز العامة داخل :root: جميع قيم الألوان الأولية، وقيم المسافات، وقيم الطباعة. هذه هي العلامة التجارية الافتراضية. لا تشير المكوّنات إلى الرموز العامة مباشرةً مطلقًا، بل تستخدم الرموز المستعارة دائمًا.
<span class="swatch swatch-primary"></span>
<span class="swatch swatch-secondary"></span>طبقة الرموز المستعارة
تشير الرموز المستعارة إلى الرموز العامة باستخدام var(): --color-action: var(--color-brand-primary). وتستخدم المكوّنات --color-action. يؤدي تغيير معنى --color-brand-primary إلى تغيير النظام بأكمله.
فئات سمات العلامة التجارية
طبّق سمات العلامات التجارية باستخدام فئة على html أو على عنصر حاوية. تتجاوز كل فئة سمة الرموز العامة ضمن نطاق تلك العلامة التجارية. وترث المكوّنات الموجودة داخل الحاوية قيم العلامة التجارية تلقائيًا.
<span class="swatch"></span>
<span class="theme-brand-a swatch"></span>
<span class="theme-brand-b swatch"></span>الوضع الداكن كسمة
الوضع الداكن هو تنويعة من السمة، ويُطبَّق باستخدام فئة أو استعلام وسائط يتجاوزان رموز الألوان. استخدم prefers-color-scheme لإعداد نظام التشغيل الافتراضي، وفئة .dark لتجاوز المستخدم. يغيّر كلاهما الرموز المستعارة نفسها.
<div class="surface">Themed surface</div>وراثة الرموز
تتدرج الخصائص المخصصة في CSS وتتوارث. تؤثر السمة المطبّقة على عنصر حاوية في جميع العناصر التابعة له. وتتجاوز السمات المتداخلة السمات الخارجية على مستوى الحاوية، ما يفيد في سيناريوهات تطبيق سمة على أداة مضمّنة داخل صفحة.
تجنب تسرّب الرموز
تأكد من تعريف الرموز المستعارة دائمًا. إذا لم تكن فئة السمة موجودة، فينبغي أن يعود الرمز المستعار بسلاسة إلى قيمة افتراضية. استخدم صيغة القيمة الاحتياطية للدالة var() في CSS: var(--color-action, #3b82f6) لمنع ظهور نص غير مرئي أو خلفيات مفقودة.
إنشاء ملفات السمات
يمكن لـ Style Dictionary إخراج ملفات CSS منفصلة للسمات انطلاقًا من ملف JSON للرموز. تنشئ خطوة البناء theme-brand-a.css وtheme-brand-b.css. حمّل الملف المناسب أثناء التشغيل، أو اجمعه في حزم منفصلة لكل علامة تجارية.
اختبار السمات
اكتب اختبارات للانحدار المرئي تعرض كل مكوّن في كل سمة. تلتقط Percy وChromatic لقطات شاشة لكل تنويعة من تنويعات السمة. تكشف الاختبارات المرئية المؤتمتة عن حالات التراجع عند تغيّر قيم الرموز العامة بشكل غير متوقع.
تبديل السمات أثناء التشغيل
بدّل فئات السمات باستخدام JavaScript: document.documentElement.classList.replace("theme-a", "theme-b"). تُحدَّث متغيرات CSS فورًا من دون إعادة عرض المكوّنات، فلا حاجة إلى إعادة عرض React أو إعادة حساب أنماط القيم الثابتة.
اعتبارات الأداء
تُحَل متغيرات CSS وقت الرسم، لذا يؤدي تغيير متغير في الجذر إلى إعادة رسم جميع العناصر التي تستخدمه. احصر تغييرات المتغيرات العامة في تفاعلات المستخدم، مثل تبديل السمة، بدلًا من حلقات التحريك. استخدم انتقالات للخصائص الفردية عند إنشاء تأثيرات تحريك السمات.
اختبار المعرفة
كيف تتيح سمات الخصائص المخصصة في CSS تبديل العلامة التجارية من دون تغيير CSS الخاص بالمكوّنات؟
الملخص
تفصل السمات متعددة العلامات التجارية بين قيم الرموز العامة الأولية والرموز المستعارة الدلالية. وتتجاوز فئات السمات الرموز العامة ضمن نطاق حاوية. وتعكس المكوّنات التي تشير إلى الرموز المستعارة تلقائيًا سمة العلامة التجارية النشطة، ما يتيح التبديل أثناء التشغيل من دون تغيير شفرة المكوّنات.
الأسئلة الشائعة
هل درس «تنفيذ سمات متعددة للعلامات التجارية باستخدام متغيرات CSS» مجاني؟
نعم — نص درس «تنفيذ سمات متعددة للعلامات التجارية باستخدام متغيرات CSS» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «تنفيذ سمات متعددة للعلامات التجارية باستخدام متغيرات CSS»؟
بدّل بين سمات علامات تجارية متعددة أثناء التشغيل عبر تبديل قيم خصائص CSS المخصصة. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «تنفيذ سمات متعددة للعلامات التجارية باستخدام متغيرات CSS»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ما هي رموز التصميم
- اصطلاحات تسمية الرموز
- تنفيذ سمات متعددة للعلامات التجارية باستخدام متغيرات CSS
- أدوات الرموز: Style Dictionary