नियम

नियम यूटिलिटी क्लास और परिणामी CSS को परिभाषित करते हैं। UnoCSS में कई अंतर्निहित नियम हैं लेकिन आसानी से कस्टम नियम जोड़ने की अनुमति भी देता है।

स्थिर नियम

इस उदाहरण के साथ:

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

जब भी उपयोगकर्ताओं के कोडबेस में m-1 का पता चलता है, निम्नलिखित CSS उत्पन्न होगा:

css

.m-1 { margin: 0.25rem; }

नोट: बॉडी सिंटैक्स CSS प्रॉपर्टी सिंटैक्स का पालन करता है, उदा. fontWeight के बजाय font-weight। यदि प्रॉपर्टी नाम में हाइफ़न - है तो इसे उद्धृत किया जाना चाहिए।
ts
rules: [
  ['font-bold', { 'font-weight': 700 }],
]

गतिशील नियम

इसे अधिक स्मार्ट बनाने के लिए, मैचर को RegExp में बदलें और बॉडी को एक फ़ंक्शन में:

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

बॉडी फ़ंक्शन का पहला तर्क RegExp मैच परिणाम है जिसे मैच किए गए समूहों को प्राप्त करने के लिए डिस्ट्रक्चर किया जा सकता है।

उदाहरण के लिए, निम्नलिखित उपयोग के साथ:

html

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

संबंधित CSS उत्पन्न होगा:

css

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

बधाई हो! अब आपके पास अपना शक्तिशाली परमाणु CSS यूटिलिटी है। आनंद लें!

CSS नियम फॉलबैक

ऐसे मामलों में जहाँ आप नए CSS सुविधाओं का उपयोग करते हुए CSS नियम फॉलबैक का लाभ उठाना चाहते हैं जबकि पुराने ब्राउज़रों को समर्थन देने में भी सक्षम हों, आप वैकल्पिक रूप से समान कुंजियों वाले नियमों के लिए CSS प्रतिनिधित्व के रूप में 2D-एरे लौटा सकते हैं। उदाहरण के लिए:

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

जिससे h-100dvh उत्पन्न होगा:

css

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

क्रमबद्धता

UnoCSS उत्पन्न CSS में आपके द्वारा परिभाषित नियमों के क्रम का सम्मान करता है। बाद वाले उच्च प्राथमिकता के साथ आते हैं।

गतिशील नियमों का उपयोग करते समय, यह कई टोकन से मेल खा सकता है। डिफ़ॉल्ट रूप से, एक ही गतिशील नियम के तहत मेल खाने वाले का आउटपुट समूह के भीतर वर्णानुक्रम में क्रमबद्ध किया जाएगा।

नियम मर्जिंग

डिफ़ॉल्ट रूप से, UnoCSS CSS का आकार कम करने के लिए समान बॉडी वाले CSS नियमों को मर्ज करेगा।

उदाहरण के लिए, <div class="m-2 hover:m2"> उत्पन्न करेगा:

css

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

दो अलग-अलग नियमों के बजाय:

css

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

विशेष प्रतीक

v0.61 से, UnoCSS आपके उत्पन्न CSS के लिए अतिरिक्त मेटा जानकारी परिभाषित करने के लिए विशेष प्रतीकों का समर्थन करता है। आप गतिशील नियम मैचर फ़ंक्शन के दूसरे तर्क से प्रतीकों तक पहुँच सकते हैं।

उदाहरण के लिए:

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

उत्पन्न होगा:

css

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

उपलब्ध प्रतीक

symbols.parent: उत्पन्न CSS नियम का मूल रैपर (उदा. @supports, @media, आदि)
symbols.selector: उत्पन्न CSS नियम के चयनकर्ता को संशोधित करने का एक फ़ंक्शन (नीचे दिए गए उदाहरण को देखें)
symbols.layer: उत्पन्न CSS नियम का UnoCSS लेयर सेट करने वाला एक स्ट्रिंग/फ़ंक्शन/रेगेक्स मैच
symbols.variants: वर्तमान CSS ऑब्जेक्ट पर लागू होने वाले वेरिएंट हैंडलर की एक सरणी
symbols.shortcutsNoMerge: शॉर्टकट में वर्तमान नियम के मर्जिंग को अक्षम करने के लिए एक बूलियन
symbols.noMerge: शॉर्टकट में वर्तमान नियम के मर्जिंग को अक्षम करने के लिए एक बूलियन
symbols.sort: वर्तमान CSS ऑब्जेक्ट की क्रमबद्धता क्रम को ओवरराइट करने के लिए एक संख्या

मल्टी-चयनकर्ता नियम

v0.61 से, UnoCSS JavaScript जेनरेटर फ़ंक्शन के माध्यम से मल्टी-चयनकर्ता का समर्थन करता है।

उदाहरण के लिए:

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 नियम उत्पन्न करेगा:

css

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

पूरी तरह से नियंत्रित नियम

TIP

यह एक उन्नत सुविधा है, अधिकांश स्थितियों में इसकी आवश्यकता नहीं होगी।

जब आप वास्तव में कुछ उन्नत नियमों की आवश्यकता होती है जो गतिशील नियम और वेरिएंट्स के संयोजन द्वारा कवर नहीं किए जाते हैं, UnoCSS आपको CSS उत्पन्न करने का पूरा नियंत्रण देने का एक तरीका भी प्रदान करता है।

यह आपको गतिशील नियम के बॉडी फ़ंक्शन से एक स्ट्रिंग लौटाने की अनुमति देता है जो सीधे उत्पन्न CSS में पास की जाएगी (इसका मतलब यह भी है कि आपको CSS एस्केपिंग, वेरिएंट लागू करना, CSS निर्माण आदि जैसी चीजों का ध्यान रखने की आवश्यकता है)।

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};
  }
}
`
    }],
  ],
})

नियम ​

स्थिर नियम ​

गतिशील नियम ​

CSS नियम फॉलबैक ​

क्रमबद्धता ​

नियम मर्जिंग ​

विशेष प्रतीक ​

उपलब्ध प्रतीक ​

मल्टी-चयनकर्ता नियम ​

पूरी तरह से नियंत्रित नियम ​