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.