ما هو UnoCSS؟

UnoCSS هو محرك CSS الذري الفوري، المصمم ليكون مرناً وقابلاً للتوسيع. النواة غير محددة الرأي وجميع أدوات CSS يتم توفيرها عبر الإعدادات المسبقة.

على سبيل المثال، يمكنك تعريف أدوات CSS المخصصة الخاصة بك، من خلال توفير القواعد في ملف التكوين المحلي.

import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }],
  ],
})

سيضيف هذا أداة CSS جديدة m-1 إلى مشروعك. نظراً لأن UnoCSS عند الطلب، فلن يفعل أي شيء حتى تستخدمه في قاعدة الكود الخاصة بك. لنفترض أن لدينا مكوناً مثل هذا:

html

<div class="m-1">Hello</div>

سيتم اكتشاف m-1 وسيتم إنشاء CSS التالي:

css

.m-1 { margin: 1px; }

لجعله أكثر مرونة، يمكنك جعل القاعدة ديناميكية عن طريق تغيير الوسيط الأول في القاعدة (نسميه matcher) إلى RegExp، والجسم إلى دالة، على سبيل المثال:

diff

export default defineConfig({
  rules: [
-    ['m-1', { margin: '1px' }],
+    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
  ],
})

من خلال القيام بذلك، يمكنك الآن الحصول على أدوات الهامش التعسفية، مثل m-1 أو m-100 أو m-52.43. ومرة أخرى، UnoCSS يولدها فقط عندما تستخدمها.

html

<div class="m-1">Hello</div>
<div class="m-7.5">World</div>

css

.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

الإعدادات المسبقة

بمجرد إنشاء بعض القواعد، يمكنك استخراجها إلى إعداد مسبق ومشاركتها مع الآخرين. على سبيل المثال، يمكنك إنشاء إعداد مسبق لنظام التصميم الخاص بشركتك ومشاركته مع فريقك.

import { Preset } from 'unocss'

export const myPreset: Preset = {
  name: 'my-preset',
  rules: [
    [/^m-([.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^p-([.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
  ],
  variants: [/* ... */],
  shortcuts: [/* ... */],
  // ...
}

import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset, // الإعداد المسبق الخاص بك
  ],
})

وبالمثل، قدمنا بعض الإعدادات المسبقة الرسمية لك لبدء استخدامها على الفور، ويمكنك أيضاً العثور على العديد من الإعدادات المسبقة للمجتمع المثيرة للاهتمام.