استفاده از تابع var() در CSS

چگونه تابع var() زندگی شما را آسان‌تر می‌کند

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

متغیرهای CSS به شما این امکان را می‌دهند تا با تغییر یک مقدار، متغیر بتواند بر روی چندین عنصر مختلف تأثیر بگذارد و این رویکرد پردازش و به‌روزرسانی کدها را ساده‌تر می‌کند. این قابلیت چیزی شبیه به یک انقلاب در دنیای CSS است و باعث می‌شود کار با آن بسیار مقیاس‌پذیر و کارآمد شود.

قابلیت‌های کلیدی var()

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

به کمک این ویژگی‌ها، شما می‌توانید سبک‌های تعریفی خود را به بخش‌های مختلف و حتی سطوح مختلف اپلیکیشن‌های وب تعمیم دهید و با یکپارچگی بی‌نظیری آن‌ها را مدیریت کنید. این کار خصوصاً در پروژه‌های بزرگ و تیمی از اهمیت بالایی برخوردار است.

مثال کد در استفاده از var()

:root { 
  --main-bg-color: #3498db; 
  --main-text-color: #ffffff; 
}

body { 
  background-color: var(--main-bg-color); 
  color: var(--main-text-color, #000000); 
  font-family: Arial, sans-serif; 
}

توضیح کد بالا

:root - سطح بالایی از یک فایل CSS است که به تمام سند اعمال می‌شود. با استفاده از این انتخابگر می‌توانیم متغیرها را در کل پروژه تعمیم دهیم.
--main-bg-color - تعریف یک متغیر برای رنگ زمینه و می‌توان آن را در مکان‌های مختلف استفاده کرد.
body - در اینجا، ما از متغیرهای تعریف شده برای تنظیم رنگ پس‌زمینه و متن در سند استفاده می‌کنیم.
var(--main-text-color, #000000) - اگر مقدار متغیر --main-text-color تعریف نشده باشد، مقدار #000000 به عنوان مقدار پیش‌فرض به کار گرفته می‌شود.