🎯 مفهوم متغیرها در SASS

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

• متغیرها با علامت $ تعریف می‌شوند.
  مثلا:

   

  $x: red;
  $bg-color: #efefef;
  $font-size: 14px;
  

🔁 استفاده از متغیرها در استایل‌دهی

• می‌توانیم مقدار متغیر را در Selectorهای مختلف استفاده کنیم:

   

  p {
    color: $color;
  }
  div {
    color: $color;
  }
  

🌍 محدوده متغیرها (Local و Global)

• اگر متغیر داخل یک Selector تعریف شود، فقط در همان محدوده local است.

• برای اینکه متغیر به صورت global قابل استفاده باشد از !global استفاده می‌کنیم.

  مثال:

   

  a {
    $color: aqua !global; // متغیر جهانی شد
    color: $color;
  }
  

📌 نکات مهم

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

🧪 نمونه کاربرد در جلسه

$color: rgb(49, 49, 49) !global;
body {
  background-color: $bg-color;
}
span {
  color: $color;
}

🚀 نتیجه

• متغیرها در SASS یکی از مهم‌ترین قابلیت‌ها هستند که سرعت توسعه، نگهداری و تغییر استایل‌ها را بسیار بهتر می‌کنند.
• استفاده اصولی از متغیرهای global و local می‌تواند ساختار پروژه را بسیار حرفه‌ای‌تر کند.