Frontend Academy · درس

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

صرّح بالخصائص المخصّصة باستخدام --، واستخدم var()، وتجاوز قيمها في النطاقات المتداخلة، ونفّذ مفتاحًا للتبديل بين السمات الفاتحة والداكنة.

الدرس 4 من 413 خطوة

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

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

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

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

عرّف الخصائص على :root لتصبح متاحة عالميًا. ويمكنك أيضًا تعريفها على أي عنصر لحصر نطاقها في الشجرة الفرعية لذلك العنصر.

:root {
  --color-primary: #3182ce;
  --color-bg: #f7fafc;
  --color-text: #1a202c;
  --spacing-md: 16px;
  --border-radius: 8px;
  --font-sans: 'Inter', system-ui, sans-serif;
}

استخدام الخصائص المخصصة

أشر إلى متغير باستخدام var(--name). وأدرج قيمة احتياطية باعتبارها الوسيط الثاني: var(--color-primary, #3182ce). وتُستخدم القيمة الاحتياطية إذا لم يكن المتغير معرّفًا.

.card {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
}

.btn {
  background: var(--color-primary, blue); /* fallback */
}

التتابع: المتغيرات محددة النطاق

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

:root { --accent: blue; }

.card { color: var(--accent); } /* blue */

.special-section {
  --accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */

الوضع الداكن باستخدام متغيرات CSS

أنظف نمط للوضع الداكن هو تعريف لوحتي ألوان فاتحة وداكنة كمتغيرات CSS. بدّل فئة أو سمة بيانات، أو استخدم استعلام الوسائط prefers-color-scheme للتبديل. ولا حاجة إلى تجاوز خصائص الألوان الفردية.

:root {
  --bg: #ffffff;
  --text: #1a202c;
  --card-bg: #f7fafc;
}

[data-theme='dark'], @media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a202c;
    --text: #f7fafc;
    --card-bg: #2d3748;
  }
}

body { background: var(--bg); color: var(--text); }

تبديل الوضع الداكن باستخدام JavaScript

أضف زر تبديل يغيّر سمة بيانات أو فئة على العنصر الجذر. تتولى متغيرات CSS الباقي — سطر واحد من JavaScript، من دون تجاوزات فردية للأنماط.

const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme');
  document.documentElement.setAttribute(
    'data-theme',
    current === 'dark' ? 'light' : 'dark'
  );
});

تحديث المتغيرات باستخدام JavaScript

يحدّث element.style.setProperty('--name', value) خاصية مخصصة مضمنة. وتؤدي إزالتها باستخدام removeProperty إلى استعادة قيمة التتابع. يتيح ذلك إنشاء سمات ديناميكية وقيم متحركة.

// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');

// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
  document.documentElement.style.setProperty('--primary-hue', hue.value);
});

رموز التصميم كمتغيرات CSS

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

:root {
  /* Colour scale */
  --blue-50: #ebf8ff;
  --blue-100: #bee3f8;
  --blue-500: #3182ce;
  --blue-900: #1a365d;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
}

استخدام المتغيرات في calc()

تعمل متغيرات CSS داخل calc()، مما يتيح إجراء حسابات متجاوبة تستند إلى قيم الرموز.

:root { --header-height: 64px; }

.content {
  /* Leave room for fixed header */
  padding-top: calc(var(--header-height) + 24px);
  min-height: calc(100vh - var(--header-height));
}

دعم المتصفحات

الخصائص المخصصة في CSS مدعومة في جميع المتصفحات الحديثة (منذ عام 2016 في المتصفحات الرئيسية). لا حاجة إلى معالج مسبق لهذه الميزة. وللتوافق مع المتصفحات القديمة جدًا، وفّر قيمة ثابتة قبل var().

.btn {
  background: blue;                    /* IE fallback */
  background: var(--color-primary);    /* modern browsers */
}

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

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

تحقق سريع

كيف تقرأ خاصية مخصصة في CSS وتحدّثها من JavaScript؟

أجب عليها في الدرس التفاعلي

مراجعة: الخصائص المخصصة في CSS

صرّح بها باستخدام -- على :root لتكون في النطاق العام. استخدمها مع var(). تتوارث المتغيرات المحددة ضمن نطاق إلى العناصر المتحدرة. لتفعيل الوضع الداكن: أعد تعريف رموز الألوان داخل استعلام وسائط أو سمة بيانات. حدّثها من JavaScript باستخدام style.setProperty(). تحويل رموز التصميم إلى متغيرات = مصدر واحد للحقيقة.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

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

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

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

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

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

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

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

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

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

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

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

تعمّق في Flexbox: المحاذاة والالتفاف والترتيب
شبكة CSS: template-areas وauto-fit وminmax
دمج Flexbox وGrid
متغيرات CSS لتنسيق السمات

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