جاري التحميل...

المتغيّرات في CSS

المرشحات عدّلت شكل البكسل. الخصائص المخصصة (متغيّرات CSS) تسهّل الصيانة: --brand واحد على :root، وعشرات الأزرار تقرأ var(--brand) — غيّر الرمز مرة واحدة فيتبعك الواجهة. تتبع التوريث والتسلسل مثل أي خاصية، لكن الاسم تختاره أنت.

اسم تملكه: `--token`

تبدو كإعلان عادي، لكن الاسم يجب أن يبدأ بشرطتين:

رموز تصميم عامة على :root

css

:root {
--brand: #2563eb;
--brand-contrast: #ffffff;
--surface: #f8fafc;
--text: #0f172a;
--radius-md: 0.5rem;
--space-3: 0.75rem;
}

:root هو جذر المستند — موقع شائع لرموز الموقع (ألوان، مسافات، أنصاف أقطار). يمكنك أيضاً تعريف --names على أي محدّد؛ الأ descendants يرثون القيمة المحسوبة ما لم تُعاد كتابتها أقرب.

القراءة بـ `var()`

استخدم var(--name) حيثما تُسمح قيمة خاصية:

زر أساسي مربوط بالرموز

css

.btn-primary {
background: var(--brand);
color: var(--brand-contrast);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3) calc(var(--space-3) * 1.5);
font: inherit;
cursor: pointer;
}

.btn-primary:hover {
background: color-mix(in srgb, var(--brand) 88%, black);
}

color-mix() لمسة اختيارية — تركيز الدرس على الرموز + var(). ثبّت أسماء الرموز في المشروع.

قيم احتياطية داخل `var()`

إذا غاب الرمز أو كان غير صالح عند الحساب، قد تسقط الإعلان. الوسيط الثاني احتياط:

احتياطي عند غياب الرمز

css

.card {
background: var(--surface, #ffffff);
color: var(--text, #111827);
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
}

الاحتياطي يساعد أثناء إعادة الهيكلة. لا يصلح خطأ إملائي في اسم var() — --surfce يبقى خاطئاً.

النطاق والتجاوز المحلي

الرموز تُورَث للأسفل. يمكن للمكوّن إعادة تعريف رمز لفرعه فقط.

📊 أين تضع الخصائص المخصصة

النطاق	محدّد نموذجي	متى
رموز عامة	`:root`	ألوان العلامة، مقياس المسافات
سمة مكوّن	`.card`, `.alert`	افتراضات نمط واحد
حالة / variant	`.card.is-warning`	تبديل رموز دون نسخ كل القواعد
تبديل حي	`[data-theme="dark"]`	لوحة جديدة؛ نفس أسماء `var(--surface)`

غيّر القيم قريباً من العنصر الذي يحتاجها. تعديل :root يؤثر على الجميع — أحياناً مطلوب، وأحياناً --accent محلي أوضح.

لون accent محلي على بطاقة

فرع بطاقة برمز accent خاص

css

.card {
--accent: var(--brand);
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: var(--radius-md);
padding: var(--space-3);
}

.card.is-featured {
--accent: #7c3aed;
}

.card__title {
color: var(--accent);
}

.card.is-featured يغيّر --accent فقط؛ العنوان والحد يتبعان عبر var().

تبديل سمة دون نسخ كل لون

افتراضي فاتح، داكن عبر data-theme

css

:root {
--surface: #f8fafc;
--text: #0f172a;
--brand: #2563eb;
}

[data-theme="dark"] {
--surface: #0f172a;
--text: #e2e8f0;
--brand: #60a5fa;
}

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

JavaScript يمكنه ضبط dataset.theme — الرموز تتغيّر حياً دون إعادة بناء CSS.

خصائص مخصصة مقابل `$` في Sass

$ في Sass يختفي عند البناء. --token يبقى في التسلسل في المتصفح.

جرّب بنفسك

خمس رموز على :root؛ زر يستخدم فقط var().
--accent على .card مع .is-featured.
احذف رمزاً مؤقتاً واستخدم fallback.
[data-theme="dark"] وبدّل في DevTools.
استبدل #2563eb مكرراً بـ var(--brand).

أخطاء شائعة

brand: blue بدلاً من --brand: blue
var() كـ اسم خاصية
خطأ إملائي بلا fallback
توقع أن المتغيّرات تلغي الت specificity

ملخص

--names بشرطتين؛ القراءة var(--name, fallback)
:root للرموز العامة؛ تجاوز محلي للمكوّنات
الرموز تُورَث — م ideal للسمات
Modern Toolkit يتابع بـ calc

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة