متغيرات CSS - وظيفة var ()
متغيرات CSS
تُستخدم var()الوظيفة لإدخال قيمة متغير CSS.
تتمتع متغيرات CSS بإمكانية الوصول إلى DOM ، مما يعني أنه يمكنك إنشاء متغيرات بنطاق محلي أو عالمي ، وتغيير المتغيرات باستخدام JavaScript ، وتغيير المتغيرات بناءً على استعلامات الوسائط.
طريقة جيدة لاستخدام متغيرات CSS هي عندما يتعلق الأمر بألوان التصميم الخاص بك. بدلاً من نسخ نفس الألوان ولصقها مرارًا وتكرارًا ، يمكنك وضعها في متغيرات.
الطريقة التقليدية
يوضح المثال التالي الطريقة التقليدية لتعريف بعض الألوان في ورقة أنماط (من خلال تحديد الألوان المراد استخدامها ، لكل عنصر محدد):
مثال
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color:
#1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px
solid #1e90ff;
padding: 5px;
}
صيغة الدالة var ()
تُستخدم var()الوظيفة لإدخال قيمة متغير CSS.
يكون بناء جملة var()الوظيفة كما يلي:
var(--name, value)
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
ملاحظة: يجب أن يبدأ اسم المتغير بشرطتين (-) وهو حساس لحالة الأحرف!
كيف يعمل var ()
بادئ ذي بدء: يمكن أن يكون لمتغيرات CSS نطاق عالمي أو محلي.
يمكن الوصول إلى المتغيرات العامة / استخدامها من خلال المستند بأكمله ، بينما يمكن استخدام المتغيرات المحلية فقط داخل المحدد حيث يتم الإعلان عنها.
لإنشاء متغير بنطاق عام ، قم بتعريفه داخل :root
المحدد. المحدد يطابق عنصر :rootجذر المستند.
لإنشاء متغير بنطاق محلي ، قم بتعريفه داخل المحدد الذي سيستخدمه.
المثال التالي يساوي المثال أعلاه ، لكننا هنا نستخدم var()الوظيفة.
أولاً ، نعلن عن متغيرين عالميين (-أزرق و- أبيض). بعد ذلك ، نستخدم
var()الوظيفة لإدخال قيمة المتغيرات لاحقًا في ورقة الأنماط:
مثال
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
مزايا استخدام var () هي:
- يجعل الكود أسهل في القراءة (أكثر قابلية للفهم)
- يجعل تغيير قيم اللون أسهل بكثير
لتغيير اللونين الأزرق والأبيض إلى اللونين الأزرق والأبيض الأكثر نعومة ، ما عليك سوى تغيير القيمتين المتغيرين:
مثال
:root {
--blue: #6495ed;
--white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم
var()الوظيفة بشكل كامل.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
وظيفة CSS var ()
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |