آموزش رونویسی کردن(Override) متغیرها در CSS

آموزش رونویسی کردن(Override) متغیرهای محلی(Local) روی متغیرهای سراسری(Global)

در مقاله ی قبلی یاد گرفتیم که می توانیم در تمام سند، به متغیرهای سراسری دسترسی پیدا کنیم. در حالیکه از متغیرهای محلی تنها می توانیم در درون سلکتوری که در آن تعریف شده است استفاده کنیم. گاهی اوقات می خواهیم متغیرها، تنها در بخش خاصی از صفحه تغییر کنند. فرض کنید می خواهیم برای عناصر <p class="note"> یک رنگ border(کادر) متفاوت تعریف کنیم.  برای انجام این کار، می توانیم متغیر --primary-bg-color را در درون سلکتور .note دوباره تعریف کنیم. 

وقتی که ما از دستور var(--primary-bg-color) در درون سلکتور مذکور استفاده کنیم، این دستور، از مقدارِ محلیِ متغیرِ --primary-bg-color که در اینجا تعریف کرده ایم، استفاده می کند. همان طور که مشاهده می کنید، مقدار متغیر محلی --primary-bg-color روی مقدار متغیر سراسری --primary-bg-color برای سلکتور .note رونویسی(جایگزین) می شود:

:root {
  --primary-bg-color: #1e90ff;
  --primary-color: #ffffff;
}

body {
  background-color: var(--primary-bg-color);
}

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  --primary-bg-color: red; /* local variable will override global */
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}

اضافه کردن یک متغیر محلی جدید

اگر قرار است که یک متغیر، تنها در یک مکان تکی قرار گیرد، ما همچنین می توانیم یک متغیر محلی(local) جدید مانند زیر تعریف کنیم:

:root {
  --primary-bg-color: #1e90ff;
  --primary-color: #ffffff;
}

body {
  background-color: var(--primary-bg-color);
}

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  --note-border-color: red; /* متغیر محلی جدید */
  border: 1px solid var(--note-border-color);
  padding: 10px;
}

منبع: https://www.w3schools.com/css