Was ist UnoCSS?

UnoCSS ist die sofortige Atomic CSS Engine, die flexibel und erweiterbar gestaltet ist. Der Kern ist unvoreingenommen und alle CSS-Utilities werden über Presets bereitgestellt.

Sie können beispielsweise Ihre benutzerdefinierten CSS-Utilities definieren, indem Sie Regeln in Ihrer lokalen Konfigurationsdatei bereitstellen.

import { defineConfig } from 'unocss'

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

Dies fügt Ihrem Projekt eine neue CSS-Utility m-1 hinzu. Da UnoCSS On-Demand ist, wird es nichts tun, bis Sie es in Ihrer Codebasis verwenden. Nehmen wir also an, wir haben eine Komponente wie diese:

html

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

m-1 wird erkannt und das folgende CSS wird generiert:

css

.m-1 { margin: 1px; }

Um es flexibler zu machen, können Sie Ihre Regel dynamisch gestalten, indem Sie das erste Argument der Regel (wir nennen es Matcher) in einen RegExp ändern und den Körper in eine Funktion, zum Beispiel:

diff

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

Auf diese Weise können Sie jetzt beliebige Margin-Utilities haben, wie m-1, m-100 oder m-52.43. Und wieder generiert UnoCSS sie nur, wenn Sie sie verwenden.

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

Presets

Sobald Sie einige Regeln erstellt haben, können Sie sie in ein Preset extrahieren und mit anderen teilen. Sie können beispielsweise ein Preset für das Design-System Ihres Unternehmens erstellen und es mit Ihrem Team teilen.

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, // Ihr eigenes Preset
  ],
})

Ähnlich haben wir einige offizielle Presets für Sie bereitgestellt, die Sie sofort verwenden können, und Sie können auch viele interessante Community-Presets finden.

Spielen

Sie können UnoCSS in Ihrem Browser im Playground ausprobieren. Oder schauen Sie sich Utilities aus den Standard-Presets in der Interaktiven Dokumentation an.