Introspection Functions به شما کمک می‌کنند اطلاعات مربوط به متغیرها، لیست‌ها، Mapها و داده‌ها را بررسی کنید.

۱️⃣ ()type-of

• بررسی نوع داده متغیر

$value: 10px;

.type {
  content: type-of($value); // "number"
}

نوع‌های ممکن

• number

• string

• color

• bool

• list

• map

• null

۲️⃣ ()unit

• بازگرداندن واحد عددی یک متغیر

$value: 12px;

.unit {
  content: unit($value); // "px"
}

• اگر مقدار بدون واحد باشد، خروجی خالی است

۳️⃣ ()unitless

• بررسی اینکه مقدار عددی بدون واحد است یا نه

$value1: 10;
$value2: 12px;

.unitless1 { content: unitless($value1); } // true
.unitless2 { content: unitless($value2); } // false

۴️⃣ ()keywords

• بررسی مقادیر keyword-like مثل auto, initial, inherit

.value: auto;

.keywords {
  content: keywords(auto); // ("auto")
}

۵️⃣ ()comparable

• بررسی اینکه آیا دو مقدار قابل مقایسه هستند

$value1: 10px;
$value2: 2em;

.comparable {
  content: comparable($value1, $value2); // false
}

۶️⃣ ()length برای لیست‌ها

• تعداد عناصر لیست یا Map

$list: 1, 2, 3;
.length {
  content: length($list); // 3
}

۷️⃣ ()map-has-key

• بررسی وجود کلید در Map

$theme: (primary: #3498db);

.has-key {
  content: map-has-key($theme, primary); // true
}

۸️⃣ نکات مهم

• Introspection Functions برای کدهای داینامیک و پویا ضروری هستند

• می‌توانند با Conditional Statements و Loops ترکیب شوند

• این توابع باعث کاهش خطا و افزایش امنیت کد می‌شوند

🔹 مثال عملی – بررسی نوع متغیر و اعمال CSS

$value: 10px;

.box {
  @if type-of($value) == "number" and unitless($value) == false {
    width: $value;
  } @else {
    width: 100px;
  }
}

📌 این مثال مطمئن می‌شود که width فقط اگر عدد با واحد باشد اعمال شود