رشته ها (String)

توابع رشته ای در Sass برای کار با «رشته (String)» هستند. یعنی متن ها را تغییر می دهند یا درباره شان اطلاعات می دهند. مهم است بدانیم اندیس ها در Sass از 1 شروع می شوند، نه 0. مثل شماره گذاری صندلی های کلاس.

توابع رشته ای Sass چیست؟

با این توابع می توانی کوتیشن اضافه کنی، کوتیشن برداری، طول متن بگیری، حروف را کوچک یا بزرگ کنی، بخش هایی را وارد یا جدا کنی، و حتی یک شناسه یکتا بسازی.

نمونه عملی: چند تابع پرکاربرد

$a: quote(Hello world!);
$b: unquote("Hello world!");
$c: to-lower-case("Hello World!");
$d: to-upper-case("Hello World!");
$idx: str-index("Hello world!", "H");
$len: str-length("Hello world!");
$ins: str-insert("Hello world!", " wonderful", 6);
$slc: str-slice("Hello world!", 2, 5);
$uid: unique-id();

.demo {
  content: $a;
}

.note {
  content: $ins;
}

.tag {
  content: $slc;
}

مشاهده در ادیتور

اندیس دهی 1-محور و برش متن

یادت باشد کاراکتر اول، اندیس 1 دارد. بنابراین برش از 2 تا 5، چهار حرف می دهد. مثل برداشتن لایه های دوم تا پنجم کتاب.

$text: "Hello world!";
$firstIndex: str-index($text, "H");
$slicePart: str-slice($text, 2, 5);

.result {
  content: $firstIndex;
}

.slice {
  content: $slicePart;
}

مشاهده در ادیتور

نکته: unique-id() در هر اجرای Sass مقدار یکتای بدون کوتیشن می سازد. برای ساخت کلاس های موقت عالی است.

سه گام تمرین سریع

1. یک متن انتخاب کن و طولش را با str-length بگیر.
2. یک واژه وارد متن کن با str-insert.
3. بخشی را با str-slice جدا کن و نمایش بده.

برای ادامه مسیر، صفحه اکستند (@extend) مفید است. همچنین توابع عددی Sass را ببین. راهنمای آغازین را از نصب (Installation) مرور کن. و برای دسترسی سریع، توابع رشته ای Sass را نشانک کن.

جمع بندی سریع

• اندیس رشته ها از 1 شروع می شود.
• quote و unquote کوتیشن را کنترل می کنند.
• str-insert و str-slice متن را ویرایش می کنند.
• to-lower-case و to-upper-case حروف را تغییر می دهند.
• unique-id() شناسه یکتا می سازد.