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

۱️⃣ ()length

• تعداد عناصر موجود در لیست را برمی‌گرداند

$colors: red, green, blue;
.list-length {
  content: length($colors); // 3
}

۲️⃣ ()nth

• دسترسی به عنصر مشخصی از لیست

• ایندکس‌ها از 1 شروع می‌شوند

$colors: red, green, blue;
.first-color {
  content: nth($colors, 1); // red
}

۳️⃣ ()append

• اضافه کردن مقدار به انتهای لیست

$numbers: 1, 2, 3;
$new-list: append($numbers, 4);

📌 خروجی: 1, 2, 3, 4

۴️⃣ ()join

• ترکیب دو لیست

$list1: 1, 2, 3;
$list2: 4, 5;
$joined: join($list1, $list2); // 1, 2, 3, 4, 5

۵️⃣ ()index

• پیدا کردن موقعیت یک عنصر در لیست

$colors: red, green, blue;
.index {
  content: index($colors, green); // 2
}

۶️⃣ ()zip

• ترکیب چند لیست در یک لیست دوبعدی

$list1: a, b, c;
$list2: 1, 2, 3;
$zipped: zip($list1, $list2);
// نتیجه: (a, 1), (b, 2), (c, 3)

۷️⃣ join(separator) و append(separator)

• می‌توان نحوه جدا کردن عناصر با space یا comma مشخص کرد

$colors: red, green;
$new-list: append($colors, blue, comma); // red, green, blue
$new-list2: append($colors, blue, space); // red green blue

۸️⃣ نکات مهم

• لیست‌ها می‌توانند Space-separated یا Comma-separated باشند

• توابع لیست برای مدیریت چند مقدار، رنگ‌ها، اندازه‌ها و کلاس‌ها بسیار کاربردی هستند

• ترکیب با Variables و Loops قدرت Sass را افزایش می‌دهد

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

$theme-colors: red, green, blue;

@for $i from 1 through length($theme-colors) {
  .color-#{$i} {
    background-color: nth($theme-colors, $i);
  }
}

📌 این مثال سه کلاس color-1, .color-2. و color-3. با رنگ‌های مختلف ایجاد می‌کند