متغيرات تجاوز CSS
تجاوز المتغير العام بالمتغير المحلي
تعلمنا من الصفحة السابقة أنه يمكن الوصول إلى المتغيرات العامة / استخدامها من خلال المستند بأكمله ، بينما يمكن استخدام المتغيرات المحلية فقط داخل المحدد حيث يتم التصريح عنها.
انظر إلى المثال من الصفحة السابقة:
مثال
: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;
}
في بعض الأحيان نريد تغيير المتغيرات فقط في قسم معين من الصفحة.
افترض أننا نريد لونًا مختلفًا من اللون الأزرق لعناصر الأزرار. بعد ذلك ، يمكننا إعادة إعلان المتغير --blue داخل محدد الزر. عندما نستخدم var (- blue) داخل هذا المحدد ، فإنه سيستخدم قيمة المتغير المحلي --blue المُعلن عنها هنا.
نرى أن المتغير المحلي --blue سيتجاوز المتغير global --blue لعناصر الزر:
مثال
: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 {
--blue: #0000ff; /* local variable will
override global */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
أضف متغير محلي جديد
إذا كان المتغير سيستخدم مكانًا واحدًا فقط ، فيمكننا أيضًا الإعلان عن متغير محلي جديد ، مثل هذا:
مثال
: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 {
--button-blue: #0000ff; /* new local
variable */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-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 |