الإعداد المسبق Mini

الإعداد المسبق الأساسي لـ UnoCSS، مع الأدوات الأساسية فقط.

الكود المصدري

التثبيت

pnpm

pnpm add -D @unocss/preset-mini

yarn

yarn add -D @unocss/preset-mini

npm

npm install -D @unocss/preset-mini

bun

bun add -D @unocss/preset-mini

import presetMini from '@unocss/preset-mini'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetMini(),
    // ...إعدادات مسبقة أخرى
  ],
})

TIP

يتم تضمين هذا الإعداد المسبق في حزمة unocss، يمكنك أيضاً استيراده من هناك:

import { presetMini } from 'unocss'

القواعد

هذا الإعداد المسبق هو مجموعة فرعية من @unocss/preset-wind3، يحتوي فقط على الأدوات الأساسية المحاذية لخصائص CSS، لكنه يستبعد الأدوات المعتمدة على الرأي أو المعقدة المقدمة في Tailwind CSS (container، animation، gradient إلخ). يمكن أن يكون هذا نقطة بداية جيدة لإعدادك المسبق المخصص على رأس الأدوات المألوفة من Tailwind CSS أو Windi CSS.

الميزات

الوضع الداكن

افتراضياً، يولد هذا الإعداد المسبق الوضع الداكن القائم على الفئة مع متغير dark:.

<div class="dark:bg-red:10" />

سيولد:

.dark .dark\:bg-red\:10 {
  background-color: rgb(248 113 113 / 0.1);
}

الوضع الداكن القائم على استعلام الوسائط

لاستخدام الوضع الداكن القائم على استعلام الوسائط عالمياً، يمكنك تغيير التكوين لمتغير dark::

presetMini({
  dark: 'media'
})

الآن

<div class="dark:bg-red:10" />

سيولد:

@media (prefers-color-scheme: dark) {
  .dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

CSS @layer

CSS's native @layer مدعوم مع متغير layer-xx:

<div class="layer-foo:p4" />
<div class="layer-bar:m4" />

سيولد:

@layer foo {
  .layer-foo\:p4 {
    padding: 1rem;
  }
}
@layer bar {
  .layer-bar\:m4 {
    margin: 1rem;
  }
}

السمة

يمكنك تخصيص خاصية السمة بالكامل في التكوين الخاص بك، وسيقوم UnoCSS في النهاية بدمجها بعمق مع السمة الافتراضية.

WARNING

خاصية breakpoints لا يتم دمجها بعمق، بل يتم تجاوزها، راجع نقاط التوقف.

presetMini({
  theme: {
    // ...
    colors: {
      veryCool: '#0000ff', // class="text-very-cool"
      brand: {
        primary: 'hsl(var(--hue, 217) 78% 51%)', // class="bg-brand-primary"
      }
    },
  }
})

الخيارات

dark

• النوع: class | media | DarkModeSelectors
• افتراضي: class

خيارات الوضع الداكن. يمكن أن تكون إما class أو media، أو كائن محدد مخصص (DarkModeSelectors).

interface DarkModeSelectors {
  /**
   * محدد للنسخة الفاتحة.
   *
   * @default '.light'
   */
  light?: string

  /**
   * محدد للنسخة الداكنة.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• النوع: Boolean
• افتراضي: false

إنشاء محدد زائف كـ [group=""] بدلاً من .group.

variablePrefix

• النوع: string
• افتراضي: un-

بادئة لخصائص CSS المخصصة.

prefix

• النوع: string | string[]
• افتراضي: undefined

بادئة الأدوات.

preflight

• النوع: boolean | on-demand
• افتراضي: true

إنشاء CSS preflight. يمكن أن يكون:

• true: إنشاء preflight دائماً.
• false: لا preflight.
• on-demand: إنشاء preflight فقط للأدوات المستخدمة.