بازنویسی متغیرها در CSS (Overriding Variables)
در این بخش می آموزید چگونه «بازنویسی متغیرها (Overriding Variables)» در CSS کار می کند. متغیرهای سراسری و محلی رفتار متفاوتی دارند؛ بنابراین می توان در بخشی از صفحه ظاهر متفاوتی ساخت، بدون تغییر بقیه سبک ها.
بازنویسی متغیر سراسری با متغیر محلی
متغیر سراسری در کل سند در دسترس است؛ اما متغیر محلی فقط داخل همان انتخاب گر معتبر است. اگر همان نام متغیر را در یک بخش دوباره تعریف کنید، مقدار محلی جای مقدار سراسری را می گیرد.
نمونه عملی
: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; }نکته: این روش برای تم های بخش بخش بسیار مفید است؛ چون تنها همان بخش تغییر می کند.
تعریف متغیر محلی جدید برای یک استفاده
گاهی بهتر است به جای بازنویسی یک متغیر سراسری، یک متغیر محلی تازه تعریف کنید. این کار وابستگی را کاهش می دهد و هدف را شفاف تر می کند.
نمونه عملی
: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; /* new local variable */ border: 1px solid var(--note-border-color); padding: 10px; }هشدار: نام متغیر باید با -- شروع شود و دقیق نوشته شود؛ خطای نام گذاری باعث بی اثر شدن ویژگی می شود.
مرجع کوتاه تابع var()
تابع var() مقدار متغیر را برمی گرداند و می تواند «مقدار پشتیبان» داشته باشد.
نحو
.box { color: var(--brand, #333); }برای آشنایی با اساس کار متغیرها به صفحه تابع var() در CSS مراجعه کنید. همچنین تغییر متغیرها با اسکریپت را در متغیرها و جاوااسکریپت ببینید.