القواعد

تحدد القواعد فئات الأداة و CSS الناتج. UnoCSS لديه العديد من القواعد المدمجة ولكنه يسمح أيضاً بإضافة قواعد مخصصة بسهولة.

القواعد الثابتة

مع هذا المثال:

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

سيتم إنشاء CSS التالي كلما تم اكتشاف m-1 في قاعدة الكود الخاصة بالمستخدمين:

.m-1 { margin: 0.25rem; }

ملاحظة: بناء الجملة للجسم يتبع بناء جملة خاصية CSS، على سبيل المثال font-weight بدلاً من fontWeight. إذا كان هناك شرطة - في اسم الخاصية فيجب اقتباسها.

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

القواعد الديناميكية

لجعله أكثر ذكاءً، غيّر matcher إلى RegExp والجسم إلى دالة:

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

الوسيط الأول لدالة الجسم هو نتيجة مطابقة RegExp التي يمكن تفكيكها للحصول على المجموعات المطابقة.

على سبيل المثال، مع الاستخدام التالي:

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

سيتم إنشاء CSS المقابل:

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

تهانينا! الآن لديك أدوات CSS ذرية قوية خاصة بك. استمتع!

احتياطي قواعد CSS

في الحالات التي قد ترغب فيها في الاستفادة من احتياطي قواعد CSS لاستخدام ميزات CSS جديدة مع القدرة أيضاً على الاحتياط لدعم المتصفحات القديمة، يمكنك إرجاع مصفوفة ثنائية الأبعاد كتمثيل CSS للقواعد بنفس المفاتيح. على سبيل المثال:

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

مما سيجعل h-100dvh يولد:

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

الترتيب

يحترم UnoCSS ترتيب القواعد التي حددتها في CSS المُنشأ. القواعد اللاحقة تأتي بأولوية أعلى.

عند استخدام القواعد الديناميكية، قد تطابق عدة رموز. افتراضياً، سيتم ترتيب إخراج تلك المطابقة تحت قاعدة ديناميكية واحدة أبجدياً داخل المجموعة.

دمج القواعد

افتراضياً، سيدمج UnoCSS قواعد CSS بنفس الجسم لتقليل حجم CSS.

على سبيل المثال، <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 رموزاً خاصة لتعريف معلومات meta إضافية لـ CSS المُنشأ الخاص بك. يمكنك الوصول إلى الرموز من الوسيط الثاني لدالة matcher القاعدة الديناميكية.

على سبيل المثال:

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

سينشئ:

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

الرموز المتاحة

• symbols.parent: غلاف الوالد لقاعدة CSS المُنشأة (على سبيل المثال @supports، @media، إلخ)
• symbols.selector: دالة لتعديل محدد قاعدة CSS المُنشأة (راجع المثال أدناه)
• symbols.layer: سلسلة/دالة/مطابقة regex تحدد طبقة UnoCSS لقاعدة CSS المُنشأة
• symbols.variants: مصفوفة من معالج المتغير الذي يتم تطبيقه على كائن CSS الحالي
• symbols.shortcutsNoMerge: قيمة منطقية لتعطيل دمج القاعدة الحالية في الاختصارات
• symbols.noMerge: قيمة منطقية لتعطيل دمج القاعدة الحالية في الاختصارات
• symbols.sort: رقم لكتابة ترتيب الفرز لكائن CSS الحالي

قواعد متعددة المحددات

منذ v0.61، يدعم UnoCSS محددات متعددة عبر دوال JavaScript Generator.

على سبيل المثال:

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 متعددة:

.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 }) => {
      // تجاهل القواعد غير المطابقة
      if (name.includes('something'))
        return

      // إذا أردت، يمكنك تعطيل المتغيرات لهذه القاعدة
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // إرجاع سلسلة بدلاً من كائن
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* يمكنك الحصول على قواعد متعددة */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* أو استعلامات الوسائط */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})