লেয়ার

CSS-এর ক্রম তাদের অগ্রাধিকারকে প্রভাবিত করে। যদিও ইঞ্জিন rules-এর ক্রম বজায় রাখবে, কখনও কখনও আপনি কিছু ইউটিলিটি গ্রুপ করতে চাইতে পারেন যাতে তাদের ক্রমের স্পষ্ট নিয়ন্ত্রণ থাকে।

ব্যবহার

Tailwind CSS যা তিনটি স্থির লেয়ার প্রদান করে (base, components, utilities) এর বিপরীতে, UnoCSS আপনাকে আপনার ইচ্ছা অনুযায়ী লেয়ার সংজ্ঞায়িত করতে দেয়। লেয়ার সেট করতে, আপনি rules-এর তৃতীয় আইটেম হিসাবে metadata পাস করতে পারেন:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // যখন আপনি layer বাদ দেন, এটি `default` হবে
  ['btn', { padding: '4px' }],
]

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

/* layer: default */
.btn { padding: 4px; }
/* layer: utilities */
.m-2 { margin: 0.5rem; }

Layer প্রতিটি preflight-এও সেট করা যায়:

preflights: [
  {
    layer: 'my-layer',
    getCSS: async () => (await fetch('my-style.css')).text(),
  },
]

ক্রম

আপনি লেয়ারগুলির ক্রম নিয়ন্ত্রণ করতে পারেন:

layers: {
  'components': -1,
  'default': 1,
  'utilities': 2,
  'my-layer': 3,
}

নির্দিষ্ট ক্রম ছাড়া লেয়ারগুলি alphabetically সাজানো হবে।

যখন আপনি আপনার কাস্টম CSS লেয়ারগুলির মধ্যে রাখতে চান, আপনি আপনার entry module আপডেট করতে পারেন:

// 'uno:[layer-name].css'
import 'uno:components.css'

// layers যা 'components' এবং 'utilities' নয় সেগুলি এখানে fallback হবে
import 'uno.css'

// আপনার নিজের CSS
import './my-custom.css'

// "utilities" layer সর্বোচ্চ অগ্রাধিকার পাবে
import 'uno:utilities.css'

CSS Cascade Layers

আপনি এইভাবে CSS Cascade Layers আউটপুট করতে পারেন:

outputToCssLayers: true

আপনি CSS Layer নামগুলি এইভাবে পরিবর্তন করতে পারেন:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // ডিফল্ট layer "utilities" CSS layer-এ আউটপুট হবে।
    if (layer === 'default')
      return 'utilities'

    // shortcuts layer "utilities" CSS layer-এর "shortcuts" sublayer হিসাবে আউটপুট হবে।
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // অন্য সব layers তাদের নাম CSS layer name হিসাবে ব্যবহার করবে।
  }
}

Variants ব্যবহার করে লেয়ার

Variants ব্যবহার করে লেয়ার তৈরি করা যায়।

uno-layer-<name>: UnoCSS layer তৈরি করতে ব্যবহার করা যায়।

<p class="uno-layer-my-layer:text-xl">text</p>

/* layer: my-layer */
.uno-layer-my-layer\:text-xl{ font-size:1.25rem; line-height:1.75rem; }

layer-<name>: CSS @layer তৈরি করতে ব্যবহার করা যায়।

<p class="layer-my-layer:text-xl">text</p>

/* layer: default */
@layer my-layer{ .layer-my-layer\:text-xl{ font-size:1.25rem; line-height:1.75rem; } }