लेयर्स

CSS का क्रम उनकी प्राथमिकताओं को प्रभावित करेगा। जबकि इंजन नियमों के क्रम को बनाए रखेगा, कभी-कभी आप कुछ यूटिलिटी को समूहित करना चाह सकते हैं ताकि उनके क्रम पर स्पष्ट नियंत्रण हो सके।

उपयोग

Tailwind CSS के विपरीत जो तीन निश्चित लेयर्स (base, components, utilities) प्रदान करता है, UnoCSS आपको अपनी इच्छानुसार लेयर्स को परिभाषित करने की अनुमति देता है। लेयर सेट करने के लिए, आप अपने नियमों के तीसरे आइटम के रूप में मेटाडेटा पास कर सकते हैं:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // when you omit the layer, it will be `default`
  ['btn', { padding: '4px' }],
]

यह उत्पन्न करेगा:

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

लेयर को प्रत्येक प्रीफ्लाइट पर भी सेट किया जा सकता है:

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

क्रमबद्धता

आप लेयर्स के क्रम को नियंत्रित कर सकते हैं:

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

निर्दिष्ट क्रम के बिना लेयर्स वर्णानुक्रम में क्रमबद्ध की जाएगी।

जब आप लेयर्स के बीच अपना कस्टम CSS चाहते हैं, तो आप अपना एंट्री मॉड्यूल अपडेट कर सकते हैं:

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

// layers that are not 'components' and 'utilities' will fallback to here
import 'uno.css'

// your own CSS
import './my-custom.css'

// "utilities" layer will have the highest priority
import 'uno:utilities.css'

CSS कैस्केड लेयर्स

आप CSS कैस्केड लेयर्स को आउटपुट कर सकते हैं:

outputToCssLayers: true

आप CSS लेयर नामों को बदल सकते हैं:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // The default layer will be output to the "utilities" CSS layer.
    if (layer === 'default')
      return 'utilities'

    // The shortcuts layer will be output to the "shortcuts" sublayer the of "utilities" CSS layer.
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // All other layers will just use their name as the CSS layer name.
  }
}

वेरिएंट्स का उपयोग करके लेयर्स

वेरिएंट्स का उपयोग करके लेयर्स बनाई जा सकती हैं।

uno-layer-<name>: UnoCSS लेयर बनाने के लिए उपयोग किया जा सकता है।

<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; } }