CSS ƙabari

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

من الصفحة السابقة نعلم أننا يمكننا الوصول إلى استخدام متغيرات عالمية في جميع أنحاء المستند، بينما يمكن استخدام متغيرات المحلية فقط في 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

CSS var() ƙanwuri

函数 描述
var() 插入 CSS 变量的值。