در حال بارگذاری...

متغیرها در CSS

فیلترها ظاهر پیکسل را عوض می‌کردند. متغیرهای سفارشی (custom property) سراغ نگهداری می‌روند: یک --brand روی :root، ده‌ها دکمه همان را با var(--brand) می‌خوانند — توکن را یک‌بار عوض کنید، کل رابط دنبال می‌کند. مثل بقیهٔ ویژگی‌ها از آبشار و ارث‌بری تبعیت می‌کنند؛ فقط نام را خودتان انتخاب می‌کنید.

نامی که خودتان می‌سازید: `--token`

شبیه اعلان معمولی است، با این تفاوت که نام حتماً با دو خط تیره شروع شود:

توکن‌های سراسری روی :root

css

:root {
--brand: #2563eb;
--brand-contrast: #ffffff;
--surface: #f8fafc;
--text: #0f172a;
--radius-md: 0.5rem;
--space-3: 0.75rem;
}

:root ریشهٔ سند است — جای رایج توکن‌های کل سایت (رنگ، فاصله، شعاع). می‌توانید --name را روی هر سلکتور هم بگذارید؛ فرزندان مقدار محاسبه‌شده را می‌گیرند مگر نزدیک‌تر عوض شود.

خواندن با `var()`

هر جا مقدار ویژگی می‌خواهید، var(--name) می‌نویسید:

دکمهٔ اصلی با توکن

css

.btn-primary {
background: var(--brand);
color: var(--brand-contrast);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3) calc(var(--space-3) * 1.5);
font: inherit;
cursor: pointer;
}

.btn-primary:hover {
background: color-mix(in srgb, var(--brand) 88%, black);
}

color-mix() نکتهٔ ظریف است؛ تمرکز درس توکن + var() است. نام‌ها را یکدست نگه دارید (--space-3 در همهٔ فایل‌ها، نه جایی --spacing3).

fallback داخل `var()`

اگر توکن نباشد یا در زمان محاسبه نامعتبر باشد، کل اعلان می‌افتد. آرگومان دوم پشتیبان است:

fallback وقتی توکن نیست

css

.card {
background: var(--surface, #ffffff);
color: var(--text, #111827);
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
}

fallback در refactor و تم ناقص کمک می‌کند. اشتباه تایپی در نام داخل var() را درست نمی‌کند — --surfce هنوز غلط است.

محدوده و بازنویسی محلی

توکن‌ها به پایین درخت ارث می‌روند. یک کامپوننت می‌تواند برای زیردرخت خودش توکن را عوض کند — برای کارت برجسته یا ویجت تو در تو.

📊 کجا توکن بگذاریم؟

محدوده	سلکتور نمونه	کی مناسب است
توکن سراسری	`:root`	رنگ برند، مقیاس فاصله، شعاع مشترک
تم کامپوننت	`.card`, `.alert`	پیش‌فرض یک الگو؛ بچه‌ها `var(--…)` می‌خوانند
حالت / variant	`.card.is-warning`, `[data-tone="muted"]`	چند توکن عوض شود بدون کپی همهٔ longhandها
تعویض زنده	`[data-theme="dark"]`, `.theme-dark` روی `<html>`	پالت عوض شود؛ قوانین همان `var(--surface)` را می‌خوانند

مقدار را نزدیک عنصری که نیاز دارد عوض کنید. دستکاری :root همه را می‌برد — گاهی همین را می‌خواهید؛ گاهی --accent محلی روی .pricing-card تمیزتر است.

accent محلی روی کارت

همان اسکلت CSS، توکن accent دیگر:

زیردرخت کارت با accent خودش

css

.card {
--accent: var(--brand);
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: var(--radius-md);
padding: var(--space-3);
}

.card.is-featured {
--accent: #7c3aed;
}

.card__title {
color: var(--accent);
}

.card.is-featured فقط --accent را عوض می‌کند؛ عنوان و border از همان var() تغذیه می‌شوند. این همان برد نگهداری است که فیلتر نمی‌دهد — نه blur تازه، بلکه یک دستگیره برای چند قانون.

عوض کردن تم بدون کپی هر رنگ

روی ریشه attribute یا کلاس بگذارید؛ یک‌بار توکن‌ها را عوض کنید:

روشن پیش‌فرض، تیره با data-theme

css

:root {
--surface: #f8fafc;
--text: #0f172a;
--brand: #2563eb;
}

[data-theme="dark"] {
--surface: #0f172a;
--text: #e2e8f0;
--brand: #60a5fa;
}

body {
background: var(--surface);
color: var(--text);
}

جاوااسکریپت می‌تواند document.documentElement.dataset.theme = 'dark' بگذارد — متغیرها زنده عوض می‌شوند بدون build دوباره. متغیر $ در Sass این کار را در مرورگر نمی‌کند.

متغیر سفارشی در برابر `$` در Sass

$ در Sass موقع build از بین می‌رود. --token در آبشار مرورگر می‌ماند — ارث، override، و حتی media query روی همان سلکتوری که تعریف شده (هنوز هم نمی‌توانید var() را نام ویژگی بگذارید). خیلی تیم‌ها هر دو را دارند: Sass برای mixin، توکن بومی برای تم.

خودتان امتحان کنید

پنج توکن روی :root (برند، surface، متن، شعاع، فاصله)؛ دکمه فقط با var().
روی .card مقدار --accent بگذارید؛ برای border و عنوان استفاده کنید؛ .is-featured accent جدید.
موقتاً یک توکن را حذف کنید و با var(--name, fallback) ببینید layout نمی‌افتد.
override تیره با [data-theme="dark"]؛ attribute را در DevTools عوض کنید.
یک #2563eb تکراری در CSS قدیمی پیدا کنید؛ با var(--brand) و یک تعریف --brand جایگزین کنید.

اشتباه‌های رایج

نوشتن brand: blue به‌جای --brand: blue
گذاشتن var(--token) به‌عنوان نام ویژگی (نامعتبر — فقط مقدار)
غلط املایی توکن بدون fallback — کل اعلان حذف می‌شود
توکن فقط روی سلکتور کوچک، بعد تعجب که جایی دورتر نمی‌بیند (ارث را چک کنید)
فکر کردن متغیر جای specificity را می‌گیرد — از آبشار استفاده می‌کند

جمع‌بندی

--name با دو خط تیره؛ خواندن با var(--name) یا var(--name, fallback)
:root توکن سراسری؛ کامپوننت برای زیردرخت override می‌کند
توکن‌ها ارث می‌روند — مناسب پالت و فاصله
تم با عوض کردن توکن، نه کپی هر رنگ
Modern Toolkit با calc و توابع ریاضی ادامه دارد

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان