متغیر سفارشی CSS نامی است که با دو خط تیره شروع می‌شه، مثل --brand. مقدار رو یک‌بار تعریف می‌کنیم و با var(--brand) توی ویژگی‌های مختلف می‌خونیم. وقتی یک رنگ در چند جزء تکرار می‌شه، این روش تغییر هماهنگ ظاهر رو ساده می‌کنه. تعریف روی :root معمولاً مقدار رو در دسترس کل سند قرار می‌ده؛ البته می‌تونی برای یک بخش هم مقدار محلی بسازی.
مثال یک رنگ تأکید رو بین عنوان و خط دور تقسیم می‌کنه. در فعالیت رنگ برند باید هم روی متن کارت و هم روی زمینه دکمه اثر بذاره. خطای رایج جاانداختن var است؛ نوشتن color:--brand مقدار معتبر رنگ نیست. نام متغیر هم باید دقیقاً یکسان باشه و خط تیره‌ها حذف نشن. ما ظاهر محاسبه‌شده مصرف‌کننده‌ها رو بررسی می‌کنیم، نه صرفاً وجود یک عبارت در متن کد. پس بعد از تعریف، حتماً متغیر رو در جای لازم مصرف کن تا رنگ واقعی اجزا با هدف یکی بشه.
✍️ مثال حل‌شده:
<h3 class="brand-title">کتاب من</h3>
<style>:root { --accent:teal; } .brand-title { color:var(--accent); border-bottom:2px solid var(--accent); }</style>
حالا نوبت توئه: متغیر --brand را روی :root برابر #2563eb تعریف کن. متن .brand-card باید با var(--brand) آبی و زمینه .brand-button هم با همین متغیر آبی شود؛ رنگ نوشته دکمه white باشد. نام دو کلاس و متن‌ها را حفظ کن؛ رنگ محاسبه‌شده هر مصرف‌کننده باید rgb(37, 99, 235) باشد.
فعالیت شما
متغیر --brand را روی :root برابر #2563eb تعریف کن. متن .brand-card باید با var(--brand) آبی و زمینه .brand-button هم با همین متغیر آبی شود؛ رنگ نوشته دکمه white باشد. نام دو کلاس و متن‌ها را حفظ کن؛ رنگ محاسبه‌شده هر مصرف‌کننده باید rgb(37, 99, 235) باشد.