لا، مِكسنات CSS لم تصل بعد — هذا ما شُحن فعلاً

لو تابعت محتوى الواجهات الأمامية هذا العام، فالأرجح أنك قرأت عنواناً من نوع: «مِكسنات CSS وصلت أخيراً — وداعاً Sass». الفكرة جذّابة: الميزة التي دفعت ملايين المطوّرين لإضافة خطوة بناء كاملة إلى مشاريعهم صارت داخل المتصفّح.

المشكلة أن هذا العنوان غير صحيح. حتى اليوم، @mixin و@apply غير مدعومتين في أي متصفّح. لا Chrome، ولا Safari، ولا Firefox.

ما شُحن فعلاً هو النصف الآخر من المواصفة — النصف الذي لا يتحدّث عنه أحد: الدوال المخصّصة @function. وهي موجودة في Chrome منذ الإصدار 139. والأهمّ من تصحيح الخبر أن ما شُحن ليس نسخة أصلية من Sass، بل شيء مختلف جوهرياً لا يستطيع Sass فعله أصلاً.

ما الذي وصل فعلاً: @function

الدالة المخصّصة تشبه المتغيّر، لكنها تُستدعى بمعاملات وتُعيد قيمة محسوبة:

@function --space(--step) {
  result: calc(var(--step) * 0.5rem);
}

.card { padding: --space(3); }

وما يجعلها أكثر من calc() مغلّفة أنها تقبل منطقاً حقيقياً في داخلها: دالة if() للشروط، بل واستعلامات وسائط @media داخل تعريف الدالة نفسها لتعيد قيمة مختلفة حسب المقاس. وتقبل تحديد أنواع اختيارية للمعاملات وللقيمة المُعادة — أي أن تمرير قيمة بنوع خاطئ يُرفَض بدل أن يُنتج نتيجة غريبة صامتة.

حالة الدعم الحقيقية

الميزة	الحالة اليوم
@function	Chrome / Edge / Opera منذ 139 — أي نحو ثلثي المستخدمين
@function في Safari وFirefox	قيد التنفيذ، لم تُشحن
@mixin و@apply	صفر متصفّحات
@contents و@env	صفر متصفّحات

الثلث المتبقّي من المستخدمين — Safari وFirefox — سيتجاهل الدالة بالكامل. وهذا ليس خبراً سيئاً بالضرورة: المتصفّح الذي لا يفهم قاعدة @ يتخطّاها بهدوء، فيبقى التصريح الاحتياطي الذي كتبته قبلها هو الذي يُطبَّق.

لماذا هي ليست «Sass داخل المتصفّح»

هنا المفارقة التي تقلب الفهم الشائع رأساً على عقب. الناس تنتظر الميزة الأصلية لتحذف Sass، بينما الميزة الأصلية تفعل شيئاً مختلفاً، لا شيئاً مماثلاً.

مِكسن Sass يُحسَب مرة واحدة وقت البناء، فينتج نصّاً ثابتاً. لا يعرف شيئاً عن الصفحة، ولا عن المستخدم، ولا عن الوضع الليلي، ولا عن عرض الحاوية التي سيعيش فيها العنصر. كل ما يعرفه هو ما كان صحيحاً لحظة الترجمة.

أما الميزة الأصلية فتُقيَّم في المتصفّح، وتقرأ الخصائص المخصّصة كما تصل إلى ذلك الموضع من الشجرة. والخصائص المخصّصة تتوارث وتُعاد تعريفها، فتحمل قيماً مختلفة في نقاط مختلفة من الصفحة.

النتيجة عملياً: الاستدعاء نفسه، بالمعاملات نفسها، قد يعطي نتيجتين مختلفتين في موضعين مختلفين من المستند. هذا ليس تحسيناً على Sass — إنه سلوك يستحيل على Sass إنتاجه بحكم بنيته، لأنه يحدث بعد انتهاء الترجمة بوقت طويل.

ومن هنا يأتي المكسب الثاني: المعالجات المسبقة تنسخ نتيجة المِكسن في كل موضع استُدعي فيه، فينتفخ ملف CSS. التعريف الأصلي يُكتب مرة واحدة ويُستدعى، فيبقى الملف أصغر.

لماذا تأخّرت @mixin تحديداً

السؤال المنطقي: لو @function شُحنت، فلماذا تعثّرت @mixin؟

لأن الدالة تُعيد قيمة واحدة في مكان محدّد، بينما المِكسن يحقن مجموعة تصريحات داخل قاعدة قائمة. وهذا يفتح أسئلة صعبة لم تُحسَم بعد في المواصفة:

1. التسريب: خاصية مخصّصة تُعرَّف داخل المِكسن — هل تبقى محبوسة فيه أم تتسرّب إلى القاعدة التي طبّقته؟
2. ترتيب المصدر: لو تعارض تصريح داخل المِكسن مع تصريح مكتوب في القاعدة نفسها، أيهما يفوز؟ الشلّال مبني على ترتيب المصدر، والحقن يشوّش هذا الترتيب.
3. إعادة التقييم الدوري: ما دام التقييم يحدث وقت التشغيل ويقرأ خصائص متغيّرة، فما الذي يمنع سلسلة إعادة حساب لا تنتهي؟
4. المعاملات: كيف تتصرّف القيم الافتراضية والمعاملات الناقصة وفحص الأنواع؟

وحتى في يناير 2026 كان فريق عمل CSS ما زال يناقش سؤالاً أساسياً: هل يُسمح بـ@apply داخل سمة style أصلاً؟ مواصفة بهذا القدر من الأسئلة المفتوحة لا تُشحن في متصفّح — وهذا انضباط محمود، لا تأخّر.

الفخّ العملي: لا تستطيع اكتشاف الدعم بسهولة

هذه النقطة تكسر خطط كثيرين. القاعدة الذهبية في الويب هي التحسين التدريجي عبر @supports. لكن فحص دعم قاعدة @ نفسها — أي @supports at-rule(@function) — ميزة حديثة جداً غير متاحة إلا في Chrome 148 فما فوق.

أي أنك لا تستطيع اليوم أن تسأل المتصفّح بثقة: «هل تدعم الدوال المخصّصة؟». الاعتماد الوحيد المتاح هو السلوك الافتراضي: المتصفّحات التي لا تفهم القاعدة تتجاهلها.

عملياً هذا يعني أن ترتيب كتابتك هو خطّة الاحتياط كلها:

.card {
  padding: 1.5rem;            /* يفهمها الجميع */
  padding: --space(3);        /* يتجاهلها من لا يدعمها */
}

اكتب القيمة المفهومة أولاً، ثم الاستدعاء بعدها. من يدعمه يستبدل، ومن لا يدعمه يتجاهل السطر ويبقى على الأول.

أين تستحقّ الدوال المخصّصة الاستخدام فعلاً

ليست كل حالة تستحقّ ميزة تعمل عند ثلثي المستخدمين فقط. هذه هي الحالات التي يكون فيها المكسب حقيقياً والخسارة عند عدم الدعم صفراً:

1. سلّم المسافات والأحجام. بدل ترديد calc() عشرات المرّات، دالة واحدة تحوّل رقم الخطوة إلى قيمة. وإن تجاهلها متصفّح، تبقى القيمة الثابتة المكتوبة قبلها سليمة تماماً.
2. الظلال المركّبة. ظلّ متعدّد الطبقات بمعامل «ارتفاع» واحد يمنحك اتساقاً بصرياً عبر البطاقات والأزرار والنوافذ المنبثقة، ويختصر سطوراً طويلة متكرّرة.
3. قيم تتبدّل مع الحاوية. هنا يظهر الفارق البنيوي: الدالة تقرأ الخصائص المخصّصة كما وصلت إلى موضعها، فتعطي نتيجة تناسب السياق المحيط دون كتابة صنف إضافي لكل حالة.
4. الحدود المزدوجة وأنصاف الأقطار المتداخلة. حسابات هندسية صغيرة متكرّرة تُكتب مرّة وتُستدعى، بدل نسخها ولصقها مع كل تعديل في نظام التصميم.

وفي المقابل، تجنّبها في كل ما يحكم بنية الصفحة: أعمدة الشبكة، الارتفاعات التي تمنع القصّ، وأي قيمة يؤدّي غيابها إلى محتوى مخفي أو متداخل. القاعدة البسيطة: إن كان الفارق بين الدعم وعدمه يُرى ولا يُكسر، فاستخدمها؛ وإن كان يكسر، فانتظر.

ملاحظة على أدوات البناء

الأدوات الحديثة لا «تترجم» هذه الدوال إلى صيغة قديمة كما تفعل مع بعض ميزات CSS الأخرى، لأن جوهرها أنها تُقيَّم وقت التشغيل — وهذا بالتحديد ما لا يستطيع أي معالج مسبق إنتاجه. فلا تنتظر إضافة تجعلها تعمل في Safari اليوم؛ ما تنتظره هو شحن Safari وFirefox لها.

أسئلة شائعة

هل أحذف Sass من مشروعي الآن؟

لا. أولاً لأن المِكسنات — وهي السبب الأول لوجود Sass عند كثيرين — غير مدعومة أصلاً. وثانياً لأن Sass يقدّم أشياء خارج نطاق هذه المواصفة تماماً: تقسيم الملفات، الحلقات، والدوال التي تعمل على النصوص والقوائم. الأصحّ أن تنظر إليهما كطبقتين تتكاملان، لا كبديلين.

هل أستخدم @function في الإنتاج اليوم؟

نعم بحذر، وبشرط واحد: أن يكون هناك تصريح احتياطي مفهوم قبلها دائماً. إن كانت الدالة تنتج فارقاً تجميلياً (مسافة، حجم، ظلّ) فالمخاطرة مقبولة. أما إن كان الفارق يكسر التخطيط أو يخفي محتوى على ثلث المستخدمين، فانتظر.

ما الفرق بين هذا وبين var() العادية؟

var() تعيد قيمة مخزّنة كما هي. الدالة المخصّصة تستقبل معاملات، وتنفّذ منطقاً وشروطاً، بل وتستجيب لاستعلامات الوسائط داخلها، ثم تعيد قيمة محسوبة. الفارق هو الفارق بين متغيّر ودالة في أي لغة برمجة.

الخلاصة

الخبر الحقيقي في CSS هذا العام ليس «وصلت المِكسنات»، بل أن نصف المواصفة وصل والنصف الأهمّ لم يصل — وأن ما وصل ليس ما كان الناس ينتظرونه.

@function متاحة في متصفّحات Chromium، وتستحقّ التجربة اليوم مع تصريح احتياطي قبلها. @mixin و@apply ما زالتا على الورق، ولسبب وجيه: أسئلة الشلّال والنطاق فيهما لم تُحسَم بعد.

والزاوية الأهمّ للاحتفاظ بها: هذه ليست ترقية لـ Sass. Sass يحسم كل شيء قبل أن تفتح الصفحة؛ CSS الأصلية تحسمه وأنت داخلها. الأولى أسرع وأكثر قابلية للتنبّؤ، والثانية تفعل ما لا يستطيعه معالج مسبق مهما تطوّر. أدواتك ستحتاج الاثنتين لفترة أطول ممّا يوحي به عنوان مثير.