آموزش متغیرهای سفارشی (Custom Properties) در CSS: نحوه تعریف و استفاده از var

متغیرهای سفارشی (Custom Properties) در CSS به شما اجازه می‌دهند که مقادیر خاصی را به صورت متغیر تعریف کنید و در سراسر کد CSS خود به‌کار ببرید. این ویژگی که با -- تعریف می‌شود و با var() استفاده می‌شود، کدهای CSS شما را سازماندهی‌تر و انعطاف‌پذیرتر می‌کند و امکان تغییرات ساده‌تر را فراهم می‌کند. در این مقاله، نحوه تعریف و استفاده از متغیرهای سفارشی در CSS و مزایای آن‌ها را بررسی می‌کنیم.

متغیرهای سفارشی (Custom Properties) در CSS چیست؟

متغیرهای سفارشی، مقادیری هستند که می‌توانیم برای ویژگی‌های CSS تعریف کنیم و در هر جایی از کدهای CSS از آن‌ها استفاده کنیم. این متغیرها با پیشوند -- تعریف شده و از طریق var() مقداردهی می‌شوند.

مزایای استفاده از متغیرهای سفارشی در CSS:

• افزایش خوانایی کد: کدها سازماندهی‌تر و خواناتر می‌شوند.

• تغییرات ساده‌تر: به راحتی می‌توانید مقادیر تکراری را در یک جا تغییر دهید.

• افزایش انعطاف‌پذیری: می‌توانید به راحتی تم‌های مختلف بسازید و با تغییر متغیرها، به طراحی‌های متنوعی دست یابید.

نحوه تعریف متغیرهای سفارشی در CSS

برای تعریف یک متغیر سفارشی، از پیشوند -- و سپس نام متغیر استفاده می‌کنیم. این متغیرها باید درون یک قالب CSS تعریف شوند، معمولاً داخل :root قرار داده می‌شوند تا در تمام صفحه در دسترس باشند.

تعریف متغیرهای سفارشی

:root {
  --main-color: #3498db;
  --secondary-color: #2980b9;
  --font-size: 16px;
}

در اینجا:

• --main-color رنگ اصلی

• --secondary-color رنگ ثانویه

• --font-size اندازه فونت را برای استفاده در کل صفحه تعریف کرده‌ایم.

نحوه استفاده از متغیرهای سفارشی با var()

برای استفاده از متغیرهای سفارشی، از تابع var() استفاده می‌کنیم. نام متغیر را به عنوان پارامتر به این تابع می‌دهیم.

مثال استفاده از متغیرهای سفارشی

body {
  background-color: var(--main-color);
  color: var(--secondary-color);
  font-size: var(--font-size);
}

button {
  background-color: var(--main-color);
  color: white;
  padding: 10px 20px;
  border: none;
  font-size: var(--font-size);
}

در اینجا:

• رنگ پس‌زمینه و متن دکمه‌ها و بدنه صفحه با استفاده از متغیرهای سفارشی تعیین شده است.

تعیین مقدار پیش‌فرض برای متغیرهای سفارشی

می‌توانید یک مقدار پیش‌فرض برای متغیرهای سفارشی تعریف کنید که در صورت عدم تعریف متغیر، آن مقدار استفاده شود.

مثال مقدار پیش‌فرض برای متغیرها

body {
  color: var(--text-color, #333);
}

در اینجا:

• اگر --text-color تعریف نشده باشد، مقدار پیش‌فرض #333 به‌کار می‌رود.

سازماندهی کدهای CSS با استفاده از متغیرهای سفارشی

می‌توانید متغیرها را برای هر بخش خاصی از کدها تعریف کنید. مثلاً برای بخش‌های مختلف یک تم می‌توانید متغیرهای متفاوتی تعریف کنید.

مثال ایجاد تم‌های مختلف با متغیرهای سفارشی

:root {
  --primary-color: #3498db;
  --secondary-color: #2980b9;
}

.light-theme {
  --background-color: #f9f9f9;
  --text-color: #333;
}

.dark-theme {
  --background-color: #333;
  --text-color: #f9f9f9;
}

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

در اینجا:

• می‌توانید با افزودن .light-theme یا .dark-theme به body، تم روشن یا تیره را برای صفحه تنظیم کنید.

کاربرد متغیرهای سفارشی در ایجاد رنگ‌ها و فونت‌های پویا

استفاده از متغیرهای سفارشی برای رنگ‌ها و اندازه‌های فونت، به شما امکان می‌دهد که تغییرات گسترده‌ای را در طراحی به‌سادگی و با تغییر یک متغیر ایجاد کنید.

مثال تغییر رنگ و فونت با متغیرهای سفارشی

:root {
  --primary-font: 'Arial', sans-serif;
  --heading-color: #2c3e50;
  --text-color: #7f8c8d;
}

h1 {
  font-family: var(--primary-font);
  color: var(--heading-color);
}

p {
  color: var(--text-color);
}

در اینجا:

• با تغییر یک متغیر می‌توانید به سادگی رنگ‌های مختلفی برای عنوان‌ها و متون ایجاد کنید.

استفاده از متغیرهای سفارشی در Media Queries

می‌توانید از متغیرهای سفارشی در Media Queries استفاده کنید تا ویژگی‌های مختلف را در اندازه‌های مختلف صفحه‌نمایش تغییر دهید.

مثال استفاده از متغیرها در Media Queries

:root {
  --font-size: 16px;
}

body {
  font-size: var(--font-size);
}

@media (max-width: 768px) {
  :root {
    --font-size: 14px;
  }
}

در اینجا:

• اندازه فونت برای صفحه‌نمایش‌های کوچکتر از 768 پیکسل به 14 پیکسل تغییر می‌کند، و این کار تنها با تغییر مقدار متغیر امکان‌پذیر شده است.

افزودن افکت‌های تعاملی با استفاده از متغیرهای سفارشی

می‌توانید متغیرهای CSS را در pseudo-classهایی مانند hover و focus تغییر دهید و افکت‌های تعاملی و جذاب‌تری ایجاد کنید.

مثال تغییر رنگ در حالت hover با استفاده از متغیرها

:root {
  --button-color: #3498db;
  --button-hover-color: #2980b9;
}

button {
  background-color: var(--button-color);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  transition: background-color 0.3s;
}

button:hover {
  background-color: var(--button-hover-color);
}

در اینجا:

• رنگ دکمه در حالت hover تغییر می‌کند و فقط با تغییر مقدار متغیرها می‌توانید این رنگ‌ها را برای تمامی دکمه‌ها یکسان کنید.

نکات و بهترین شیوه‌ها برای استفاده از متغیرهای سفارشی

• تعریف متغیرها در : برای دسترسی آسان در سراسر کدهای CSS، متغیرهای اصلی را در :root تعریف کنید.

• نام‌گذاری توصیفی برای متغیرها: از نام‌های توصیفی برای متغیرها استفاده کنید تا کدها خوانا و قابل‌فهم باشند.

• پرهیز از استفاده بیش از حد از متغیرها: تنها در جایی که نیاز است از متغیرها استفاده کنید تا از پیچیدگی بیش از حد جلوگیری کنید.

• استفاده از مقادیر پیش‌فرض: همواره یک مقدار پیش‌فرض برای متغیرهای حساس قرار دهید تا در صورت عدم تعریف متغیر، کدها به‌درستی کار کنند.

نتیجه‌گیری

متغیرهای سفارشی در CSS ابزاری قوی برای بهبود انعطاف‌پذیری و سازماندهی کدها هستند. با استفاده از این متغیرها می‌توانید رنگ‌ها، فونت‌ها و دیگر ویژگی‌های CSS را به راحتی تغییر دهید و به طراحی پویا و حرفه‌ای دست یابید. با رعایت بهترین شیوه‌ها و تمرین، می‌توانید از متغیرهای سفارشی در پروژه‌های خود استفاده کنید و تجربه کاربری بهتری برای مخاطبان خود فراهم کنید.