রুলস

রুলস utility classes এবং resulting CSS সংজ্ঞায়িত করে। UnoCSS-এর অনেক বিল্ট-ইন রুলস আছে কিন্তু কাস্টম রুলস সহজেই যোগ করার অনুমতিও দেয়।

স্ট্যাটিক রুলস

এই উদাহরণ দিয়ে:

rules: [
  ['m-1', { margin: '0.25rem' }],
]

নিম্নলিখিত CSS জেনারেট হবে যখন ব্যবহারকারীর codebase-এ m-1 সনাক্ত করা হবে:

.m-1 { margin: 0.25rem; }

নোট: বডি সিনট্যাক্স CSS property সিনট্যাক্স অনুসরণ করে, যেমন fontWeight নয় বরং font-weight। যদি property নামে hyphen - থাকে তাহলে এটি উদ্ধৃত করা উচিত।

rules: [
  ['font-bold', { 'font-weight': 700 }],
]```

ডাইনামিক রুলস

এটি আরও স্মার্ট করতে, matcher-কে RegExp-এ এবং body-কে একটি ফাংশনে পরিবর্তন করুন:

rules: [
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]

Body ফাংশনের প্রথম আর্গুমেন্ট হল RegExp ম্যাচ রেজাল্ট যা matched groups পেতে destructured করা যায়।

উদাহরণস্বরূপ, নিম্নলিখিত ব্যবহারের সাথে:

<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    My Button
  </button>
</div>

corresponding CSS জেনারেট হবে:

.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

অভিনন্দন! এখন আপনার নিজের শক্তিশালী atomic CSS utilities আছে। উপভোগ করুন!

CSS রুলস ফলব্যাক

কিছু ক্ষেত্রে আপনি CSS রুলস ফলব্যাক ব্যবহার করতে চাইতে পারেন নতুন CSS ফিচার ব্যবহার করার জন্য এবং পুরানো ব্রাউজার সমর্থন করতে পারেন, আপনি ঐচ্ছিকভাবে same keys সহ রুলসের জন্য CSS representation হিসাবে 2D-array রিটার্ন করতে পারেন। উদাহরণস্বরূপ:

rules: [
  [/^h-(\d+)dvh$/, ([_, d]) => {
    return [
      ['height', `${d}vh`],
      ['height', `${d}dvh`],
    ]
  }],
]

যা h-100dvh-কে জেনারেট করবে:

.h-100dvh { height: 100vh; height: 100dvh; }

অর্ডার

UnoCSS আপনার সংজ্ঞায়িত রুলসের ক্রম জেনারেট করা CSS-এ সম্মান করে। পরবর্তীগুলি উচ্চ অগ্রাধিকার সহ আসে।

ডাইনামিক রুলস ব্যবহার করার সময়, এটি একাধিক টোকেন ম্যাচ করতে পারে। ডিফল্টভাবে, একক ডাইনামিক রুলসের নিচে ম্যাচ করা those-এর আউটপুট alphabetically সাজানো হবে।

রুলস মার্জিং

ডিফল্টভাবে, UnoCSS একই body সহ CSS রুলস মার্জ করবে CSS size minimize করতে।

উদাহরণস্বরূপ, <div class="m-2 hover:m2"> জেনারেট করবে:

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

দুটি আলাদা রুলসের পরিবর্তে:

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

বিশেষ সিম্বল

v0.61 থেকে, UnoCSS আপনার জেনারেট করা CSS-এর জন্য অতিরিক্ত meta information সংজ্ঞায়িত করতে বিশেষ সিম্বল সমর্থন করে। আপনি ডাইনামিক rule matcher ফাংশনের দ্বিতীয় আর্গুমেন্ট থেকে সিম্বল অ্যাক্সেস করতে পারেন।

উদাহরণস্বরূপ:

rules: [
  [/^grid$/, ([, d], { symbols }) => {
    return {
      [symbols.parent]: '@supports (display: grid)',
      display: 'grid',
    }
  }],
]

জেনারেট করবে:

@supports (display: grid) {
  .grid {
    display: grid;
  }
}

পাওয়া যায় এমন সিম্বল

• symbols.parent: জেনারেট করা CSS rule-এর parent wrapper (যেমন @supports, @media, etc.)
• symbols.selector: জেনারেট করা CSS rule-এর selector পরিবর্তন করতে একটি ফাংশন (নিচের উদাহরণ দেখুন)
• symbols.layer: একটি string/function/regex match যা জেনারেট করা CSS rule-এর UnoCSS layer সেট করে
• symbols.variants: variant handler-এর একটি array যা current CSS object-এ প্রয়োগ হয়
• symbols.shortcutsNoMerge: shortcuts-এ current rule-এর মার্জিং নিষ্ক্রিয় করতে একটি boolean
• symbols.noMerge: shortcuts-এ current rule-এর মার্জিং নিষ্ক্রিয় করতে একটি boolean
• symbols.sort: current CSS object-এর sorting order ওভাররাইড করতে একটি number

মাল্টি-সিলেক্টর রুলস

v0.61 থেকে, UnoCSS JavaScript Generator functions এর মাধ্যমে multi-selector সমর্থন করে।

উদাহরণস্বরূপ:

rules: [
  [/^button-(.*)$/, function* ([, color], { symbols }) {
    yield {
      background: color
    }
    yield {
      [symbols.selector]: selector => `${selector}:hover`,
      // https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
      background: `color-mix(in srgb, ${color} 90%, black)`
    }
  }],
]

একাধিক CSS rule জেনারেট করবে:

.button-red {
  background: red;
}
.button-red:hover {
  background: color-mix(in srgb, red 90%, black);
}

সম্পূর্ণ নিয়ন্ত্রিত রুলস

TIP

এটি একটি উন্নত ফিচার, বেশিরভাগ পরিস্থিতিতে এটির প্রয়োজন হবে না।

যখন আপনাকে আসলেই কিছু উন্নত রুলস দরকার যা ডাইনামিক রুলস এবং Variants-এর সমন্বয় দ্বারা covered নয়, UnoCSS আপনাকে CSS জেনারেট করতে সম্পূর্ণ নিয়ন্ত্রণ দেওয়ার একটি উপায়ও প্রদান করে।

এটি আপনাকে ডাইনামিক rule-এর body ফাংশন থেকে একটি string রিটার্ন করতে দেয় যা সরাসরি জেনারেট করা CSS-এ পাস হবে (এটি также означает যে আপনাকে CSS escaping, variant applying, CSS constructing ইত্যাদির মতো জিনিসগুলির যত্ন নিতে হবে)।

import { defineConfig, toEscapedSelector as e } from 'unocss'

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // discard mismatched rules
      if (name.includes('something'))
        return

      // if you want, you can disable the variants for this rule
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // return a string instead of an object
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* you can have multiple rules */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* or media queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})