بازنویسی متغیرها (Overriding Variables)
گاهی می خواهیم «متغیر (Variable)» فقط در یک بخش تغییر کند. این کار را با بازنویسی متغیر سراسری، داخل یک سلکتور محلی انجام می دهیم.
بازنویسی مقدار سراسری با مقدار محلی
متغیر سراسری در «:root» تعریف می شود. سپس داخل یک سلکتور مثل .note همان نام متغیر را دوباره مقداردهی می کنیم تا فقط همان جا اثر کند.
:root {\n --primary-bg-color: #1e90ff;\n --primary-color: #ffffff;\n}\n\nbody {\n background-color: var(--primary-bg-color);\n}\n\n.container {\n color: var(--primary-bg-color);\n background-color: var(--primary-color);\n padding: 15px;\n}\n\n.container h2 {\n border-bottom: 2px solid var(--primary-bg-color);\n}\n\n.container .note {\n --primary-bg-color: red;\n border: 1px solid var(--primary-bg-color);\n padding: 10px;\n}\nتعریف یک متغیر محلی جدید
اگر مقدار فقط همان جا لازم است، نام تازه بگذار. سپس با var() همان را استفاده کن.
:root {\n --primary-bg-color: #1e90ff;\n --primary-color: #ffffff;\n}\n\nbody {\n background-color: var(--primary-bg-color);\n}\n\n.container {\n color: var(--primary-bg-color);\n background-color: var(--primary-color);\n padding: 15px;\n}\n\n.container h2 {\n border-bottom: 2px solid var(--primary-bg-color);\n}\n\n.container .note {\n --note-border-color: red;\n border: 1px solid var(--note-border-color);\n padding: 10px;\n}\nگام های عملی
- متغیر سراسری را در :root تعریف کن.
- برای بخش خاص، همان نام را محلی مقداردهی کن.
- با var() مقدار نهایی را در استایل بخوان.
جمع بندی سریع
- محلی روی سراسری اولویت دارد.
- نام متغیر باید یکسان باشد.
- برای نیاز خاص، متغیر جدید بساز.
- خواندن مقدار با var() انجام می شود.
برای آشنایی پایه، به صفحه تابع var() سر بزن. همچنین بخش رابط کاربری در تنظیمات ظاهری کمک می کند.