Selector Functions در Sass امکان دسترسی، ترکیب و تولید Selectorهای CSS را به صورت پویا فراهم می‌کنند.

۱️⃣ ()selector-nest

• توابع ()selector-nest دو یا چند سلکتور را داخل هم قرار می‌دهد

selector-nest('.parent', '.child');
// خروجی: ".parent .child"

مثال

$selector: selector-nest('.nav', '.item');
#{$selector} {
  color: red;
}
// خروجی CSS: .nav .item { color: red; }

۲️⃣ ()selector-append

• اضافه کردن یک سلکتور به انتهای سلکتور دیگر

selector-append('.button', ':hover'); 
// خروجی: ".button:hover"

مثال

$hover: selector-append('.btn', ':hover');
#{$hover} {
  background-color: blue;
}

۳️⃣ ()selector-replace

• جایگزین کردن بخشی از Selector با مقدار دیگر

selector-replace('.btn-primary', 'primary', 'secondary');
// خروجی: ".btn-secondary"

۴️⃣ ()selector-unify

• ادغام دو Selector برای کم کردن تکرار قوانین

selector-unify('.btn', '.btn-primary'); 
// خروجی: ".btn.btn-primary"

۵️⃣ نکات مهم

• Selector Functions در CSS داینامیک، کلاس‌های پویا و ترکیب سلسله‌مراتبی کاربرد دارند

• اغلب با Interpolation (#{}) استفاده می‌شوند

• این توابع Readability و Maintainability کد را افزایش می‌دهند

🔹 مثال عملی – تولید کلاس‌های داینامیک

$states: hover, active, focus;

@each $state in $states {
  $selector: selector-append('.button', ":#{$state}");
  #{$selector} {
    background-color: darkblue;
  }
}

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

• button:hover.

• button:active.

• button:focus.