جاري التحميل...
جاري التحميل...
Custom Properties، light-dark()، color-mix()، Dark/Light Mode
متغيرات CSS (تُعرف أيضاً بـ CSS Custom Properties) هي متغيرات حقيقية معرّفة ومُستخدمة مباشرة داخل CSS نفسه. وهي واحدة من أقوى الميزات التي أضافتها مواصفات CSS الحديثة.
تبدأ دائماً بـ -- وتُستدعى باستخدام الدالة var(). على عكس متغيرات Sass/Less، تعمل متغيرات CSS مباشرة في المتصفح دون أي معالجة مسبقة.
الفرق الرئيسي مع متغيرات Sass: متغيرات CSS ديناميكية وتعمل أثناء التشغيل. يمكنك تغييرها باستخدام JavaScript في أي وقت، وتورث عبر شجرة DOM مثل خصائص CSS الأخرى.
تحل متغيرات CSS عدة مشاكل حرجة في تطوير الواجهة الأمامية:
تخيل أن لديك نظام تصميم بألوان وخطوط ومسافات محددة. بدون المتغيرات، عليك تكرار هذه القيم في كل ملف CSS:
✅ مشكلة التكرار:
إذا أردت تغيير لون الحد من #e5e7eb إلى #d1d5db، ستحتاج لتعديل كل ملف يدوياً! مع المتغيرات، غيّره مرة واحدة في التعريف وانتهيت.
مع المتغيرات، جميع القيم تُجمع في مكان واحد وتُستخدم في كل مكان آخر. إذا أردت تغيير أي قيمة، فقط غيّر التعريف.
دعنا نشرح كل مفهوم ببساطة قبل الغوص في الكود:
إليك ما يحدث في المتصفح عند استخدام متغيرات CSS:
ما الفرق الأساسي بين متغيرات CSS ومتغيرات Sass؟
متى تستخدم light-dark() ومتى تستخدم prefers-color-scheme؟
أنشئ نظام سمات يتضمن: 1) رموز تصميم باستخدام CSS Variables في :root. 2) السمة الداكنة عبر data-theme='dark'. 3) استخدام color-mix() لدرجات الألوان. 4) تفاعل JavaScript لتبديل السمة. 5) احترام prefers-color-scheme كافتراضي. 6) استخدام light-dark() في بعض الأماكن لتقليل الكود.
الحل:
/* CSS Variables Theming Challenge */
/* 1. Design Tokens */
:root {
--color-primary: #2563eb;
--bg-page: #ffffff;
--text-primary: #111827;
--surface: #f9fafb;
color-scheme: light dark;
}
/* 2. Dark Theme */
[data-theme="dark"] {
--bg-page: #0f172a;
--text-primary: #e5e7eb;
--surface: #1e293b;
}
/* 3. Color Mixing */
--primary-100: color-mix(in oklch, var(--color-primary) 20%, white);
--primary-900: color-mix(in oklch, var(--color-primary) 80%, black);
/* 4. light-dark() */
.card {
background: light-dark(#ffffff, #1e293b);
color: light-dark(#111827, #e5e7eb);
}
/* 5. System preference respect */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bg-page: #0f172a;
--text-primary: #e5e7eb;
}
}تعريف واستخدام المتغيرات:
/* تعريف */
:root {
--color-primary: #2563eb;
--spacing-md: 1rem;
}
/* استخدام */
.element {
color: var(--color-primary);
padding: var(--spacing-md);
}
/* مع قيمة افتراضية */
.element {
color: var(--color-primary, #3b82f6);
}color-mix() - خلط الألوان:
/* درجات اللون الأساسي */
--primary-100: color-mix(in oklch, var(--primary) 20%, white);
--primary-500: var(--primary);
--primary-900: color-mix(in oklch, var(--primary) 80%, black);
/* خلط لونين */
half-blue: color-mix(in oklch, blue 50%, red);light-dark() - ألوان تلقائية:
body { color-scheme: light dark; }
.card {
background: light-dark(#ffffff, #1e293b);
color: light-dark(#111827, #e5e7eb);
border: 1px solid light-dark(#e5e7eb, #334151);
}نمط تبديل السمة:
:root, [data-theme="light"] {
color-scheme: light;
--bg: #ffffff;
--text: #111827;
}
[data-theme="dark"] {
color-scheme: dark;
--bg: #0f172a;
--text: #e2e8f0;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
}
}