انتخابگرها (Selector)

در Sass، «انتخابگر (Selector)» همان الگوی انتخاب عناصر است. «توابع انتخابگر Sass» برای بررسی و دستکاری انتخابگرها استفاده می شوند. با این توابع می توانی ترکیب کنی، جایگزین کنی، یا لانه ای بسازی.

توابع انتخابگر Sass چیست؟

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

ابر انتخابگر: is-superselector

«ابر انتخابگر (Superselector)» انتخابگری است که همه تطابق های زیرمجموعه را هم می پوشاند.

$a: is-superselector("div", "div.myInput");
$b: is-superselector("div.myInput", "div");
$c: is-superselector("div", "div");

.super-demo {
  --a: $a;
  --b: $b;
  --c: $c;
}

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

چسباندن انتخابگرها: selector-append

این تابع، انتخابگر دوم را به انتهای اولی می چسباند.

$x: selector-append("div", ".myInput");
$y: selector-append(".warning", "__a");

.append-demo {
  --x: "#{$x}";
  --y: "#{$y}";
}

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

لانه ای سازی انتخابگرها: selector-nest

این تابع، فهرستی از انتخابگرها را به صورت لانه ای ترکیب می کند.

$n1: selector-nest("ul", "li");
$n2: selector-nest(".warning", "alert", "div");

.nest-demo {
  --n1: "#{$n1}";
  --n2: "#{$n2}";
}

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

تجزیه انتخابگر: selector-parse

این تابع، اجزای یک انتخابگر را به صورت فهرست رشته ها برمی گرداند.

$parts: selector-parse("h1 .myInput .warning");

.parse-demo {
  --parts: "#{$parts}";
}

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

جایگزینی در انتخابگر: selector-replace

یک بخش از انتخابگر را با بخش جدید جایگزین می کند.

$rep: selector-replace("p.warning", "p", "div");

.replace-demo {
  --rep: "#{$rep}";
}

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

یکپارچه سازی انتخابگرها: selector-unify

انتخابگری می سازد که فقط عناصر مشترک را هدف می گیرد.

$u1: selector-unify("myInput", ".disabled");
$u2: selector-unify("p", "h1");

.unify-demo {
  --u1: "#{$u1}";
  --u2: "#{$u2}";
}

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

تجزیه به اجزای ساده: simple-selectors

انتخابگر مرکب را به اجزای ساده تقسیم می کند.

$s1: simple-selectors("div.myInput");
$s2: simple-selectors("div.myInput:before");

.simple-demo {
  --s1: "#{$s1}";
  --s2: "#{$s2}";
}

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

نکته: اگر با نقشه ها کار می کنی، صفحه نقشه ها (Map) را ببین. برای آشنایی با introspection هم به درون نگری (Introspection) سر بزن.

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

1. با selector-append یک کلاس را به تگ بچسبان.
2. با selector-replace «p» را به «div» عوض کن.
3. با selector-unify یک انتخابگر مشترک بساز.

جمع بندی سریع

• is-superselector پوشش انتخابگر بزرگ تر را می سنجد.
• selector-append و selector-nest ساختار می سازند.
• selector-replace و selector-unify تغییر هدف می دهند.
• selector-parse و simple-selectors تحلیل می کنند.