متغیرهای پوشش 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;
}

آزمایش کنید

گاهی اوقات، ما می‌خواهیم متغیرها تنها در بخش خاصی از صفحه تغییر کنند.

فرض کنید که می‌خواهیم عناصر button از رنگ آبی متفاوتی استفاده کنند. پس می‌توانیم متغیر --blue را در انتخابگر button دوباره تعریف کنیم. وقتی در این انتخابگر از var(--blue) استفاده می‌کنیم، آن‌ها از مقدار محلی --blue استفاده می‌کنند.

ما می‌بینیم که متغیر محلی --blue پوشش می‌دهد --blue متغیر عناصر 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 را وارد کنید.