শর্টকাট

শর্টকাটগুলি আপনাকে একাধিক rules একক shorthand-এ সমন্বয় করতে দেয়, Windi CSS-এর অনুপ্রেরণায়।

ব্যবহার

shortcuts: {
  // একাধিক ইউটিলিটিতে শর্টকাট
  'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
  'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  // একক ইউটিলিটি alias
  'red': 'text-red-100',
}

সাধারণ mapping-এর পাশাপাশি, UnoCSS আপনাকে ডাইনামিক শর্টকাট সংজ্ঞায়িত করতেও দেয়।

রুলস-এর মতোই, একটি ডাইনামিক শর্টকাট হল একটি matcher RegExp এবং একটি handler ফাংশনের সমন্বয়।

shortcuts: [
  // আপনার এখনও object style থাকতে পারে
  {
    btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
  },
  // ডাইনামিক শর্টকাট
  [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
]

এর সাথে, আমরা btn-green এবং btn-red ব্যবহার করে নিম্নলিখিত CSS জেনারেট করতে পারি:

.btn-green {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --un-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--un-bg-opacity));
  border-radius: 0.5rem;
  --un-text-opacity: 1;
  color: rgb(220 252 231 / var(--un-text-opacity));
}
.btn-red {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --un-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--un-bg-opacity));
  border-radius: 0.5rem;
  --un-text-opacity: 1;
  color: rgb(254 226 226 / var(--un-text-opacity));
}