‏آشنایی با @function در CSS و تجربه‌ی توسعه‌اش

CSS بالاخره صاحب تابع (@function) شده تا نویسنده‌ها بتونن رفتار property‌ها رو بسته‌بندی و در سراسر استایل‌شیت بازاستفاده کنن، بدون تکرار کد یا شلوغ‌کردن DOM با متغیرهای کمکیِ یک‌بارمصرف. شکل پایه‌ایش ساده‌ست؛ یه تابع با result تعریف می‌شه و با اسمش صدا زده می‌شه:

@function --hello-world() {
  result: "Hello World";
}

body::after {
  content: --hello-world() "!";
}

فعلاً هر تابع فقط می‌تونه یه مقدار property برگردونه (یا بخشی از اون). یه ویژگی خوبش بسته‌بندیه: می‌تونی داخل تابع متغیرهای واسط بسازی که کاملاً خصوصی‌ان و روی المنت نشت نمی‌کنن — اون‌قدر خصوصی که حتی ثبت سراسری (@property) هم نمی‌تونه نوعشون رو تعیین کنه. تابع‌ها آرگومان هم می‌گیرن و می‌تونی براشون نوع و مقدار پیش‌فرض تعریف کنی (که با مقدار پیش‌فرض، اختیاری می‌شن).

ولی تم اصلی مقاله، دست‌اندازها (gotchas) هستن و نویسنده صریح می‌گه تجربه‌ی توسعه فعلاً خوب نیست. چند نمونه: اگه تابع رو با آرگومان‌های بیش‌ازحد یا کم‌تر از حد صدا بزنی، به‌جای یه خطای مفید، بی‌سروصدا شکست می‌خوره. در رفتار سراسری، ارجاع به یه متغیر ثبت‌شده با var() باعث می‌شه fallback اون غیرقابل‌دسترس بشه. یه آرگومان از نوع integer اگه مقدار اعشاری بگیره (بدون پیچیدن در calc) رد می‌شه و به initial می‌افته. مهم‌تر، تنها جایی در کل CSS که متغیر سرجاش پخش (expand) نمی‌شه، آرگومان‌های موقع فراخوانی یه تابع سفارشیه؛ یعنی اگه یه --rgb: 0,255,0 رو به تابع سه‌آرگومانی بدی، هر سه مقدار توی آرگومان اول چپونده می‌شن.

چند محدودیت دیگه: یه سینتکس عمدی برای «ضدپخش» با آکولاد وجود داره؛ تابع‌ها فعلاً نمی‌تونن خودشون رو صدا بزنن (بازگشت ممنوعه چون CSS اون رو چرخه‌ای می‌بینه و به initial می‌افته)؛ و یه باگ مهم اینه که نمی‌تونی مقدار خروجیِ یه تابع رو دوباره به همون تابع پاس بدی (که نویسنده می‌گه تیم استاندارد قبولش کرده و قراره زود رفعش کنه). یه نکته‌ی مثبت هم اینه که آرگومان‌های نوع‌دارِ داخل تابع، اگه مقدار به نوع موردنظر تبدیل نشه به initial می‌افتن، که اجازه می‌ده از fallbackهای محاسبه‌شده استفاده کنی. جمع‌بندی نویسنده: DX فعلی خوب نیست، ولی پتانسیل زیادی داره و همین حالا هم کارهای زیادی (هرچند سطحی) باهاش می‌شه کرد.

نکات کلیدی:

• CSS با @function اجازه می‌ده رفتار property‌ها رو بسته‌بندی و بازاستفاده کنی، بدون تکرار کد
• متغیرهای داخل تابع خصوصی‌ان و نشت نمی‌کنن؛ آرگومان‌ها می‌تونن نوع و مقدار پیش‌فرض داشته باشن
• دست‌اندازهای زیاد: شکست خاموش با تعداد آرگومان اشتباه، نبود recursion و پخش‌نشدن آرگومان‌های کامادار
• تجربه‌ی توسعه فعلاً خوب نیست ولی پتانسیل بالایی داره