UnoCSS কি?

UnoCSS হল instant atomic CSS engine, যা flexible এবং extensible হওয়ার জন্য ডিজাইন করা হয়েছে। Core un-opinionated এবং সমস্ত CSS utilities presets এর মাধ্যমে প্রদান করা হয়।

উদাহরণস্বরূপ, আপনি আপনার local config file-এ rules প্রদান করে আপনার custom CSS utilities সংজ্ঞায়িত করতে পারেন।

import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }],
  ],
})

এটি আপনার প্রজেক্টে একটি নতুন CSS utility m-1 যোগ করবে। যেহেতু UnoCSS on-demand, আপনি আপনার codebase-এ এটি ব্যবহার না করা পর্যন্ত এটি কিছু করবে না। তো ধরুন আমাদের এমন একটি component আছে:

<div class="m-1">Hello</div>

m-1 detect করা হবে এবং নিম্নলিখিত CSS জেনারেট হবে:

.m-1 { margin: 1px; }

এটি আরও flexible করতে, আপনি আপনার rule-কে dynamic করতে পারেন rule-এর প্রথম argument (আমরা একে matcher বলি) কে RegExp-এ পরিবর্তন করে, এবং body-কে একটি ফাংশনে, উদাহরণস্বরূপ:

export default defineConfig({
  rules: [
-    ['m-1', { margin: '1px' }],
+    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
  ],
})

এটি করার মাধ্যমে, এখন আপনার কাছে arbitrary margin utilities থাকতে পারে, যেমন m-1, m-100 বা m-52.43। এবং আবার, UnoCSS শুধুমাত্র তখনই জেনারেট করে যখন আপনি সেগুলি ব্যবহার করেন।

<div class="m-1">Hello</div>
<div class="m-7.5">World</div>

.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

Presets

একবার আপনি কয়েকটি rules তৈরি করলে, আপনি সেগুলি একটি preset-এ বের করতে পারেন, এবং অন্যদের সাথে share করতে পারেন। উদাহরণস্বরূপ, আপনি আপনার company's design system-এর জন্য একটি preset তৈরি করতে পারেন, এবং আপনার team-এর সাথে share করতে পারেন।

import { Preset } from 'unocss'

export const myPreset: Preset = {
  name: 'my-preset',
  rules: [
    [/^m-([.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^p-([.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
  ],
  variants: [/* ... */],
  shortcuts: [/* ... */],
  // ...
}

import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset, // your own preset
  ],
})

তেমনভাবে, আমরা আপনার জন্য কয়েকটি official presets প্রদান করেছি যা আপনি সরাসরি ব্যবহার শুরু করতে পারেন, এবং আপনি অনেকগুলি interesting community presets খুঁজে পেতে পারেন।

Play

আপনি আপনার browser-এ Playground-এ UnoCSS চেষ্টা করতে পারেন। অথবা default presets থেকে utilities Interactive Docs-এ দেখতে পারেন।

Integrations

UnoCSS বিভিন্ন frameworks / tools-এর জন্য integrations নিয়ে আসে:

উদাহরণ

সমস্ত উদাহরণের সোর্স কোড /examples directory-তে পাওয়া যাবে।