متغيرات تغطية CSS

استخدام متغير محلي لتغطية متغير عالمي

من الصفحة السابقة نعلم أننا يمكننا الوصول إلى/استخدام المتغيرات العالمية في جميع أنحاء المستند، بينما يمكن استخدام المتغيرات المحلية فقط داخل selector الذي تم إعلانه.

انظر إلى مثال في الصفحة السابقة:

النموذج

: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;
}

تجربة شخصية

في بعض الأحيان، نريد أن يتم تغيير المتغير فقط في جزء معين من الصفحة.

إذا كنا نريد أن يستخدم عنصر button لونًا أزرقًا مختلفًا. يمكننا إعادة إعلان متغير --blue في selector button. عند استخدامنا لـ var(--blue) في هذا selector، سيستخدم القيمة المحلية --blue هنا.

نحن نرى أن متغير --blue المحلي يغطي متغير --blue العالمي لـ element button:

النموذج

: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;
  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;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

تجربة شخصية

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم هذا الخصائص بشكل كامل.

وظيفة
var() 49.0 15.0 31.0 9.1 36.0

وظيفة var() CSS

وظيفة وصف
var() إدراج قيمة المتغير CSS