متغیرها در Sass امکان تعریف مقادیر ثابت و استفاده مجدد در فایل‌های SCSS را فراهم می‌کنند، که باعث کاهش تکرار و مدیریت آسان‌تر CSS می‌شود.

۱️⃣ تعریف متغیر

• علامت $ قبل از نام متغیر قرار می‌گیرد

$primary-color: #3498db;
$font-stack: 'Roboto', sans-serif;
$base-padding: 10px;

۲️⃣ استفاده از متغیر

• جایگزینی مقادیر ثابت با نام متغیر

body {
  font-family: $font-stack;
  color: $primary-color;
  padding: $base-padding;
}

📌 هر تغییر در مقدار متغیر، تمام بخش‌هایی که از آن استفاده کرده‌اند بروزرسانی می‌شود

۳️⃣ متغیرهای رنگ و عملیات

• Sass امکان عملیات ریاضی روی متغیرها را می‌دهد

$base-color: #3498db;

.button {
  background-color: $base-color;
  border-color: darken($base-color, 10%);
}

• توابع پرکاربرد:

  • lighten($color, 20%)

  • darken($color, 15%)

  • adjust-hue($color, 30deg)

  • rgba($color, 0.5)

۴️⃣ متغیرهای اندازه و واحدها

• عملیات ریاضی روی واحدها

$base-width: 100px;
$double-width: $base-width * 2;

.box {
  width: $double-width; // 200px
}

• می‌توان واحدها را با هم ترکیب کرد، اما توصیه می‌شود واحدها یکسان باشند

۵️⃣ نکات مهم

• نام متغیر Case Sensitive است (Primary != $primary)

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

• متغیرها می‌توانند در Partials و Modules استفاده شوند و با use@ یا import@ در دسترس قرار گیرند

• متغیرها باعث کاهش تکرار، خوانایی بهتر و مدیریت آسان‌تر پروژه‌های بزرگ می‌شوند

🔹 مثال کامل

// Variables
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Roboto', sans-serif;
$base-padding: 10px;

// Using variables
body {
  font-family: $font-stack;
  color: $primary-color;
  padding: $base-padding;
}

.button {
  background-color: $secondary-color;
  padding: $base-padding * 2;
  border: 1px solid darken($secondary-color, 10%);
}

📌 تغییر $secondary-color کافی است تا تمام بخش‌های مربوطه بلافاصله بروزرسانی شوند