CSS Overriding Variables

وقتی از CSS Variables استفاده می‌کنیم، می‌تونیم متغیرها رو در جاهای مختلف دوباره تعریف کنیم و این یعنی قابلیت Override کردن.

🔹 قانون کلی

  • متغیرها هم مثل استایل‌ها از Cascade (اولویت‌بندی CSS) پیروی می‌کنن.

  • اگر متغیری دوباره تعریف بشه، مقدار جدیدش جایگزین مقدار قبلی می‌شه (در همان محدوده).

🔹 مثال ۱: تغییر مقدار در یک بخش خاص

:root {
  --main-color: blue;
}

div {
  color: var(--main-color);
}

/* این مقدار فقط روی class="special" اعمال میشه */
.special {
  --main-color: red;
}

👉 در اینجا همه <div>ها آبی هستن، ولی هر div با کلاس special قرمز خواهد بود.

🔹 مثال ۲: مقدار پیش‌فرض و override

:root {
  --font-size: 18px;
}

p {
  font-size: var(--font-size);
}

/* مقدار جدید برای بخش header */
header {
  --font-size: 24px;
}

👉 پاراگراف‌ها داخل header فونت ۲۴px می‌گیرن و بقیه ۱۸px باقی می‌مونن.

🔹 مثال ۳: حالت Dark Mode با override

:root {
  --bg-color: white;
  --text-color: black;
}

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

.dark-mode {
  --bg-color: black;
  --text-color: white;
}

👉 وقتی روی <body> کلاس dark-mode بذاریم، رنگ‌ها override می‌شن و سایت به حالت تاریک می‌ره.

🔹 مثال ۴: جاوااسکریپت و Override

<button onclick="darkMode()">Dark Mode</button>
<div class="box">Hello CSS Variables</div>

:root {
  --main-bg: #fff;
  --main-text: #000;
}

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

function darkMode() {
  document.documentElement.style.setProperty('--main-bg', '#000');
  document.documentElement.style.setProperty('--main-text', '#fff');
}

👉 جاوااسکریپت می‌تونه متغیرهای تعریف‌شده رو تغییر بده و باعث override داینامیک بشه.

✅ خلاصه:

  • متغیرها طبق قانون Cascade و Specificity رفتار می‌کنن.

  • می‌تونیم در سطوح مختلف مقدار جدیدی برای متغیر تعریف کنیم.

  • این ویژگی عالیه برای تم‌ها، کامپوننت‌های جداگانه، و حالت‌های مختلف مثل dark/light.