CSS کا متغیر کا احاطہ

پوشش متغیرهای محلی بر متغیرهای کلی

از صفحه قبل ما می‌دانیم که می‌توانیم متغیرهای کلی را در کل مستند استفاده کنیم/استفاده کنیم، در حالی که متغیرهای محلی فقط در انتخابگر معرفی شده آن‌ها استفاده می‌شوند.

لطفاً به مثال صفحه قبل نگاه کنید:

مثال

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  بگارنگ رنگ: var(--white)；
  پیدائش: 15 پیکس؛
}
بٹن {
  بگارنگ رنگ: var(--white)；
  color: var(--blue);
  border: 1px solid var(--blue);
  پیدائش: 5 پیکس؛
}

نوآبادیاں بھی کچھ کریں

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

اگر می‌خواهیم element button از رنگ آبی متفاوتی استفاده کند، می‌توانیم متغیر --blue را در انتخابگر button دوباره معرفی کنیم. وقتی در این انتخابگر از var(--blue) استفاده می‌کنیم، آن مقدار متغیر محلی --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);
  بگارنگ رنگ: var(--white)；
  پیدائش: 15 پیکس؛
}
بٹن {
  --blue: #0000ff;
  بگارنگ رنگ: var(--white)；
  color: var(--blue);
  border: 1px solid var(--blue);
  پیدائش: 5 پیکس؛
}

نوآبادیاں بھی کچھ کریں

افزودن یک متغیر محلی جدید

اگر یک متغیر را فقط در یک مکان استفاده می‌کنیم، می‌توانیم یک متغیر محلی جدید را نیز معرفی کنیم، مانند این:

مثال

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  بگارنگ رنگ: var(--white)；
  پیدائش: 15 پیکس؛
}
بٹن {
  --button-blue: #0000ff；
  بگارنگ رنگ: var(--white)；
  رنگ: var(--button-blue)；
  بوردر: 1 پیکس سولڈ var(--button-blue)；
  پیدائش: 5 پیکس؛
}

نوآبادیاں بھی کچھ کریں

بروزر سپورٹ

جداول میں دیئے گئے نمبر، اس خاصیت کو پورا طور پر سپورٹ کرنے والے پہلے بروزر کا ورژن کا ذکر کرتا ہے。

فونکشن
var() 49.0 15.0 31.0 9.1 36.0

CSS var() فونکشن

فونکشن وصف
var() CSS متغیر کا درجہ لگانا،