Sass مجموعه‌ای از توابع قدرتمند رنگ ارائه می‌دهد که امکان تغییر روشنایی، شفافیت، ترکیب رنگ‌ها و کار با HSL/RGB را فراهم می‌کند.

۱️⃣ ()lighten() / darken

• lighten(color, amount%) → روشن‌تر کردن رنگ

• darken(color, amount%) → تیره‌تر کردن رنگ

$primary: #3498db;

.light {
  background-color: lighten($primary, 20%); // رنگ روشن‌تر
}

.dark {
  background-color: darken($primary, 20%); // رنگ تیره‌تر
}

۲️⃣ ()saturate() / desaturate

• saturate(color, amount%) → افزایش غلظت رنگ

• desaturate(color, amount%) → کاهش غلظت رنگ

$primary: #3498db;

.saturated {
  background-color: saturate($primary, 20%);
}

.desaturated {
  background-color: desaturate($primary, 50%);
}

۳️⃣ ()adjust-hue

• تغییر Hue رنگ به مقدار مشخص (در درجه)

$primary: #3498db;

.adjusted {
  background-color: adjust-hue($primary, 45deg);
}

۴️⃣ ()rgba() / opacify() / transparentize

• rgba(color, alpha) → تغییر شفافیت رنگ

• opacify(color, amount) → افزایش شفافیت

• transparentize(color, amount) → کاهش شفافیت

$primary: #3498db;

.semi {
  background-color: rgba($primary, 0.5);
}

.opaque {
  background-color: opacify($primary, 0.3);
}

.transparent {
  background-color: transparentize($primary, 0.4);
}

۵️⃣ ()mix

• ترکیب دو رنگ با نسبت مشخص

$red: #ff0000;
$blue: #0000ff;

.purple {
  background-color: mix($red, $blue, 50%); // #800080
}

۶️⃣ ()complement

• ایجاد رنگ مکمل

$primary: #3498db;

.complement {
  background-color: complement($primary);
}

۷️⃣ ()scale-color

• تغییر نسبی ویژگی‌های رنگ مانند lightness, saturation, red, green, blue

$primary: #3498db;

.scaled {
  background-color: scale-color($primary, $lightness: -20%, $saturation: 10%);
}

۸️⃣ نکات مهم

• Color Functions باعث می‌شوند CSS داینامیک، سازگار با تم و قابل تنظیم باشد

• مناسب برای سیستم‌های رنگ و طراحی تم‌ها

• ترکیب با Variables, Mixins و Maps بسیار قدرتمند است

🔹 مثال عملی – سیستم تم رنگی

$theme-colors: (
  primary: #3498db,
  secondary: #2ecc71
);

@each $name, $color in $theme-colors {
  .bg-#{$name} { background-color: $color; }
  .bg-#{$name}-light { background-color: lighten($color, 20%); }
  .bg-#{$name}-dark { background-color: darken($color, 20%); }
}

📌 این مثال شش کلاس CSS تولید می‌کند:

• bg-primary, .bg-primary-light, .bg-primary-dark.

• bg-secondary, .bg-secondary-light, .bg-secondary-dark.