Sass توابع زیادی برای مدیریت و پردازش رشته‌ها ارائه می‌دهد که به شما امکان می‌دهد CSS داینامیک و انعطاف‌پذیر بنویسید.

۱️⃣ str-length

• طول یک رشته را برمی‌گرداند

$text: "Hello World";
.length {
  content: str-length($text); // 11
}

۲️⃣ str-insert

• قرار دادن یک رشته داخل رشته دیگر در موقعیت مشخص

$text: "Hello World";
.inserted {
  content: str-insert($text, " Beautiful", 6);
  // خروجی: "Hello Beautiful World"
}

۳️⃣ str-index

• پیدا کردن موقعیت اولین وقوع یک زیررشته

$text: "Hello World";
.index {
  content: str-index($text, "World"); // 7
}

۴️⃣ str-slice

• برش بخشی از رشته

$text: "Hello World";
.slice {
  content: str-slice($text, 1, 5); // "Hello"
}

۵️⃣ to-upper-case / to-lower-case

• تبدیل رشته به حروف بزرگ یا کوچک

$text: "Hello World";
.upper {
  content: to-upper-case($text); // "HELLO WORLD"
}
.lower {
  content: to-lower-case($text); // "hello world"
}

۶️⃣ unquote / quote

• حذف یا اضافه کردن علامت کوتیشن به رشته

$text: "Hello World";
.unquoted {
  content: unquote('"Hello World"'); // Hello World
}
.quoted {
  content: quote(Hello World); // "Hello World"
}

۷️⃣ append / join

• اضافه کردن یا ترکیب رشته‌ها

$text1: "Hello";
$text2: "World";
.joined {
  content: $text1 + " " + $text2; // "Hello World"
}

۸️⃣ نکات مهم

• String Functions باعث می‌شوند CSS شما داینامیک و قابل محاسبه شود

• مفید برای تولید کلاس‌ها یا نام‌های پویا در پروژه‌های بزرگ

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

🔹 مثال عملی

$theme: "dark";
.button-#{$theme} {
  background-color: if($theme == "dark", #333, #fff);
  color: if($theme == "dark", #fff, #333);
}

📌 با استفاده از String Interpolation و توابع رشته‌ای، می‌توان نام کلاس‌ها و مقادیر CSS داینامیک ایجاد کرد