آموزش کار با متغیرها یا Variables در CSS

مقدمه

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

توضیح مفهومی متغیرها

CSS Variables با پیشوند -- تعریف می‌شوند و با تابع var() فراخوانی می‌شوند. این ویژگی باعث می‌شود تغییرات سریع و یکپارچه در کل پروژه امکان‌پذیر باشد.

• تعریف متغیر در :root برای دسترسی سراسری
• استفاده از var() برای فراخوانی مقدار متغیر
• امکان تعیین مقدار پیش‌فرض در var() برای جلوگیری از خطا
• تغییر مقادیر متغیر با media queries یا جاوااسکریپت

مثال عملی با کد

تعریف و استفاده از متغیرها:

:root {
  --main-color: #3498db;
  --padding-size: 10px;
}

div.box {
  background-color: var(--main-color);
  padding: var(--padding-size);
}

استفاده از مقدار پیش‌فرض:

div.alert {
  color: var(--alert-color, red);
}

تغییر مقدار متغیر در media query:

@media (max-width: 768px) {
  :root {
    --padding-size: 5px;
  }
}

نکات مهم و توضیحات تکمیلی

• متغیرها باعث کاهش تکرار و مدیریت آسان‌تر CSS می‌شوند.
• با استفاده از :root می‌توان متغیرها را سراسری کرد.
• تغییر مقادیر متغیر در media query باعث طراحی واکنش‌گرا می‌شود.
• می‌توان متغیرها را با جاوااسکریپت تغییر داد تا طراحی پویا ایجاد شود.

ادامه آموزش CSS

برای یادگیری صفحه‌بندی و مدیریت محتوا با Pagination در CSS، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.