المتغيرات

المتغيرات تسمح لك بتطبيق بعض الاختلافات على قواعدك الموجودة، مثل متغير hover: من Tailwind CSS.

مثال

ts

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // قطع بادئة `hover:` وتمريرها إلى المتغيرات والقواعد التالية
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

matcher يتحكم في متى يتم تمكين المتغير. إذا كانت القيمة المُرجعة سلسلة، سيتم استخدامها كمحدد لمطابقة القواعد.
selector يوفر إمكانية تخصيص محدد CSS المُنشأ.

تحت الغطاء

دعنا نأخذ جولة حول ما حدث عند المطابقة لـ hover:m-2:

hover:m-2 مستخرج من استخدامات المستخدمين
hover:m-2 يُرسل إلى جميع المتغيرات للمطابقة
hover:m-2 يتم مطابقته بواسطة متغيرنا ويعيد m-2
النتيجة m-2 ستُستخدم للجولة التالية من مطابقة المتغيرات
إذا لم يتم مطابقة متغير آخر، m-2 سينتقل بعد ذلك لمطابقة القواعد
قاعدتنا الأولى يتم مطابقتها وتولد .m-2 { margin: 0.5rem; }
أخيراً، نطبق تحويل متغيراتنا على CSS المُنشأ. في هذه الحالة، أضفنا :hover إلى خطاف selector

نتيجة لذلك، سيتم إنشاء CSS التالي:

css

.hover\:m-2:hover { margin: 0.5rem; }

مع هذا، يمكننا الحصول على m-2 مطبقة فقط عندما يمرر المستخدمون فوق العنصر.

المضي قدماً

نظام المتغيرات قوي جداً ولا يمكن تغطيته بالكامل في هذا الدليل، يمكنك التحقق من تنفيذ الإعداد المسبق الافتراضي لرؤية استخدامات أكثر تقدماً.