Variables و Custom Properties — تصميم CSS

متغيرات CSS (Custom Properties)

كررت اللون #4f46e5 في 30 مكاناً ثم قررت تغييره؟ المتغيرات تحل هذا، وتفعل أكثر بكثير من متغيرات Sass لأنها حية في المتصفح.

التعريف والاستخدام

:root {
    --color-primary: #4f46e5;
    --color-text: #1f2937;
    --radius: 12px;
    --space: 16px;
}
.btn {
    background: var(--color-primary);
    border-radius: var(--radius);
    padding: calc(var(--space) / 2) var(--space);
}

- الاسم يبدأ بـ -- وهو حساس لحالة الأحرف.

- :root هو عنصر <html>، فالمتغير متاح في كل الصفحة.

- calc() تجري حسابات بالمتغيرات والوحدات المختلفة.

القيمة الاحتياطية

.card { padding: var(--card-padding, 20px); }   /* 20px إن لم يُعرَّف المتغير */

النطاق والوراثة: قوتها الحقيقية

المتغيرات تُورث للأبناء، ويمكن إعادة تعريفها في أي عنصر:

.btn { background: var(--btn-bg, var(--color-primary)); color: white; }
.btn.danger { --btn-bg: #dc2626; }       /* نفس القاعدة، لون مختلف */
.btn.success { --btn-bg: #16a34a; }

بدل كتابة القاعدة كاملة لكل زر، تغيّر "إعداداً" واحداً.

السمات (Themes) والوضع الليلي

:root {
    --bg: #ffffff;
    --text: #111827;
    --surface: #f3f4f6;
}
[data-theme="dark"] {
    --bg: #0f172a;
    --text: #e5e7eb;
    --surface: #1e293b;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f172a;
        --text: #e5e7eb;
        --surface: #1e293b;
    }
}
body { background: var(--bg); color: var(--text); }
.card { background: var(--surface); }

- prefers-color-scheme يتبع إعداد نظام المستخدم تلقائياً.

- data-theme على <html> يسمح بزر تبديل يدوي (بسطر JavaScript واحد).

- المكونات تستخدم المتغيرات فقط؛ لا تعرف شيئاً عن السمة.

من JavaScript

document.documentElement.style.setProperty('--color-primary', '#0ea5e9');
document.documentElement.dataset.theme = 'dark';

تسمية منظمة

سمِّ المتغيرات حسب الدور: --color-primary، --color-danger، --space-2، --radius-lg. أسماء مثل --blue تفقد معناها عندما يتغير اللون.

حدود

- المتغير لا يعمل داخل media query كشرط: @media (max-width: var(--bp)) لا يعمل.

- قيمة غير صالحة للخاصية لا تُرجع للقيمة السابقة بل للقيمة الأولية/الموروثة — افحصها في أدوات المطور.

تمرين

انقل كل ألوان صفحتك ومسافاتها وزواياها إلى متغيرات في :root، ثم أضف وضعاً ليلياً بـ prefers-color-scheme. جرّبه بتغيير سمة النظام أو من أدوات المطور (Rendering ← Emulate prefers-color-scheme).

/* نظام تصميم بسيط باستخدام Variables */
:root {
    /* الألوان */
    --color-primary: #6366f1;
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    
    /* المسافات */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    
    /* الخطوط */
    --font-small: 12px;
    --font-base: 16px;
    --font-large: 20px;
    --font-xl: 28px;
}

.btn-primary {
    background: var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--space-xs);
}

.alert-success {
    background: var(--color-success);
    padding: var(--space-md);
}