فصل شانزدهم: کار با متغیرها (Variables) در CSS
مقدمه
در CSS جدید می‌توانی مثل جاوااسکریپت برای رنگ‌ها، اندازه‌ها یا هر پارامتری متغیر تعریف کنی و هرجا لازم داشتی، مقدار آن را تغییر بدهی یا استفاده کنی.
این باعث می‌شود تغییر ظاهر سایت یا ساختن تم‌های روشن/تاریک فوق‌العاده راحت باشد.
۱. تعریف متغیر (Custom Properties)
معمولاً داخل یک سلکتور ریشه (مثل :root) تعریف می‌شوند تا همه جا قابل استفاده باشند.
:root {
--main-color: #2196f3;
--accent-color: #ff5722;
--radius: 10px;
}- نام‌ها باید با — شروع شود.
۲. استفاده از متغیرها
برای استفاده از متغیر، تابع var() را استفاده می‌کنی:
button {
color: var(--main-color);
background: var(--accent-color);
border-radius: var(--radius);
}۳. مقدار پیش‌فرض اگر متغیر وجود نداشت
اگر متغیر تعریف نشود یا اشتباه نوشته شود، می‌توانی مقدار پیش‌فرض بدهی:
color: var(--wrong-var, orange);۴. تغییر پویا (تم‌بندی)
کافیست متغیر را در بخشی دیگر دوباره مقداردهی کنی:
:root {
--bg: #fff;
--text: #222;
}
body.dark-mode {
--bg: #222;
--text: #fff;
}
body {
background: var(--bg);
color: var(--text);
}حالا با تغییر کلاس body به dark-mode، تم عوض می‌شود!
۵. متغیرهای محلی
می‌توانی متغیر را مختص یک بخش خاص کنی:
.card {
--color: #4caf50;
color: var(--color);
}۶. مثال عملی
<button class="btn">دکمه من</button>:root {
--main-color: #1976d2;
--btn-radius: 6px;
}
.btn {
background: var(--main-color);
border-radius: var(--btn-radius);
color: #fff;
padding: 10px 18px;
font-size: 1rem;
}با تغییر مقدار متغیرها در :root، رنگ یا گوشه دکمه در تمام سایت عوض می‌شود.
۷. تمرین
۱. یک متغیر برای سایه بساز و در چند جا از سایت استفاده کن.
۲. یک تم شب/روز درست کن تا رنگ پس‌زمینه و متن با تغییر کلاس عوض شوند.
۳. متغیر مختص مثلاً هر کارت (card) استفاده کن و تفاوت را مشاهد کن.
نکته پیشرفته
متغیرهای CSS می‌توانند توسط جاوااسکریپت هم کنترل شوند! (برای پویا کردن مقدار یا ساخت تم پیشرفته)
منابع بیشتر
