ভেরিয়েন্টস

ভেরিয়েন্টস আপনাকে আপনার বিদ্যমান rules-এ কিছু ভ্যারিয়েশন প্রয়োগ করতে দেয়, যেমন Tailwind CSS-এর hover: ভেরিয়েন্ট।

উদাহরণ

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // slice `hover:` prefix and passed to the next variants and rules
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher নিয়ন্ত্রণ করে কখন ভেরিয়েন্ট সক্রিয় হয়। যদি রিটার্ন মান একটি স্ট্রিং হয়, এটি rules ম্যাচ করতে selector হিসাবে ব্যবহার হবে।
• selector জেনারেট করা CSS selector কাস্টমাইজ করার সুবিধা প্রদান করে।

পর্দার পেছনে

hover:m-2 ম্যাচ করার সময় কী ঘটেছে তা একটি ট্যুর দেওয়া যাক:

• hover:m-2 ব্যবহারকারীর ব্যবহার থেকে বের করা হয়
• hover:m-2 সমস্ত ভেরিয়েন্টসে ম্যাচিংয়ের জন্য পাঠানো হয়
• hover:m-2 আমাদের ভেরিয়েন্ট দ্বারা ম্যাচ হয় এবং m-2 রিটার্ন করে
• ফলাফল m-2 পরবর্তী রাউন্ডের ভেরিয়েন্টস ম্যাচিংয়ের জন্য ব্যবহার হবে
• যদি অন্য কোনো ভেরিয়েন্ট ম্যাচ না হয়, m-2 তারপর rules ম্যাচ করতে যাবে
• আমাদের প্রথম rule ম্যাচ হয় এবং .m-2 { margin: 0.5rem; } জেনারেট করে
• অবশেষে, আমরা আমাদের ভেরিয়েন্টসের ট্রান্সফর্মেশন জেনারেট করা CSS-এ প্রয়োগ করি। এই ক্ষেত্রে, আমরা selector hook-এ :hover prepend করি

ফলস্বরূপ, নিম্নলিখিত CSS জেনারেট হবে:

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

এর সাথে, আমরা m-2 শুধুমাত্র তখনই প্রয়োগ করতে পারি যখন ব্যবহারকারীরা element-এর উপর hover করে।

আরও এগিয়ে

ভেরিয়েন্ট সিস্টেম অত্যন্ত শক্তিশালী এবং এই গাইডে সম্পূর্ণভাবে কভার করা যায় না, আপনি ডিফল্ট preset-এর বাস্তবায়ন দেখতে পারেন আরও উন্নত ব্যবহার দেখতে।