CSS Overriding Variables
وقتی از CSS Variables استفاده میکنیم، میتونیم متغیرها رو در جاهای مختلف دوباره تعریف کنیم و این یعنی قابلیت Override کردن.
🔹 قانون کلی
-
متغیرها هم مثل استایلها از Cascade (اولویتبندی CSS) پیروی میکنن.
-
اگر متغیری دوباره تعریف بشه، مقدار جدیدش جایگزین مقدار قبلی میشه (در همان محدوده).
🔹 مثال ۱: تغییر مقدار در یک بخش خاص
👉 در اینجا همه <div>
ها آبی هستن، ولی هر div با کلاس special
قرمز خواهد بود.
🔹 مثال ۲: مقدار پیشفرض و override
👉 پاراگرافها داخل header
فونت ۲۴px میگیرن و بقیه ۱۸px باقی میمونن.
🔹 مثال ۳: حالت Dark Mode با override
👉 وقتی روی <body>
کلاس dark-mode
بذاریم، رنگها override میشن و سایت به حالت تاریک میره.
🔹 مثال ۴: جاوااسکریپت و Override
👉 جاوااسکریپت میتونه متغیرهای تعریفشده رو تغییر بده و باعث override داینامیک بشه.
✅ خلاصه:
-
متغیرها طبق قانون Cascade و Specificity رفتار میکنن.
-
میتونیم در سطوح مختلف مقدار جدیدی برای متغیر تعریف کنیم.
-
این ویژگی عالیه برای تمها، کامپوننتهای جداگانه، و حالتهای مختلف مثل dark/light.