‏اسکوپ عجیب و قدرتمند توابع سفارشی CSS

جین اوری تو این مقاله سراغ یه رفتار جالب توابع سفارشی CSS (‎@function) می‌ره. تو CSS معمولی، متغیرهای ‎--var از والد به فرزند ارث می‌رسن؛ ولی توابع سفارشی یه چیز فراتر دارن: هر جا صداشون بزنی، متغیرهای همون‌جا رو می‌بینن، انگار یه فرزند تو DOM بودن و اون‌ها رو ارث برده باشن.

به تعبیر نویسنده، این مثل اینه که تو جاوااسکریپت بدنهٔ تابع رو به‌صورت رشته نگه داری و هر جا لازم شد اجراش کنی — یه جور «اسکوپ ارزیابی». برای همین یه تابع می‌تونه به متغیرهایی مثل ‎--theme یا ‎--size-1 که سر محل فراخوانی تعریف شدن دسترسی داشته باشه، بدون این‌که به‌عنوان آرگومان بهش پاس داده بشن:

@function --font-size() {
  result: var(--size-1);
}
html { --size-1: 1rem; }
html div { font-size: --font-size(); /* 1rem */ }

به گفتهٔ نویسنده، این برای کامپوننت‌ها فوق‌العاده‌ست: هر کامپوننتی می‌تونه توابع CSS خودش رو داشته باشه که فقط از داخل همون کامپوننت صدا زده می‌شن، پس پیاده‌سازیِ تابع می‌تونه روی یه اسکوپ تضمین‌شده از کامپوننت حساب کنه.

قدم بعدی جالب‌تره: می‌تونی توابعی بسازی که فقط قراره از داخل یه تابع دیگه صدا زده شن. اون‌وقت متغیرهای پیچیده‌ای که تابع والد حساب می‌کنه، برای تابع فرزند یه «اسکوپ ارزیابی قابل‌حمل» می‌شن. یه تابع والدِ سوییچ‌برد می‌تونه با ‎if(style()) بین چند تابع فرزند انتخاب کنه، و بعد با توابع بیرونی (شبیه partial application) اون پیچیدگی رو از دید کاربر پنهان کنی و فقط یه API تمیز بدی.

نمونهٔ واقعی این الگو کتابخونهٔ doubledash‌ـه که اولین لوپ‌های ۱۰۰٪ CSS و حتی عملیات بیت‌وایز روی اعداد ۱۶ بیتی رو با همین ترفند پیاده کرده. نویسنده اعتراف می‌کنه که DX پایهٔ توابع سفارشی CSS هنوز پر از دردسر و محدودیته، ولی این «اسکوپ ارزیابی» رو یه ابزار واقعاً قدرتمند می‌دونه که ارزش کاوش داره.

نکات کلیدی:

• تابع سفارشی CSS متغیرها رو از محل فراخوانی می‌خونه، نه محل تعریف
• این رفتار شبیه closure یا eval تو جاوااسکریپته
• می‌شه برای هر کامپوننت یه اسکوپ تضمین‌شده ساخت
• الگوی «اسکوپ ارزیابی قابل‌حمل» پیچیدگی رو پنهان و DX رو تمیز می‌کنه
• نمونهٔ واقعی: لوپ‌ها و عملیات بیت‌وایز تو کتابخونهٔ doubledash