What is UnoCSS?

UnoCSS je okamžitý atomický CSS engine, ktorý je navrhnutý tak, aby bol flexibilný a rozšíriteľný. Jadro je nestranné a všetky CSS utility sú poskytované prostredníctvom presetov.

Napríklad môžete definovať svoje vlastné CSS utility poskytnutím pravidiel vo vašom lokálnom konfiguračnom súbore.

import { defineConfig } from 'unocss'

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

Toto pridá novú CSS utility m-1 do vášho projektu. Keďže UnoCSS je on-demand, neurobí nič, kým ju nepoužijete vo vašom kóde. Takže povedzme, že máte komponent ako tento:

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

m-1 bude detegované a nasledujúce CSS bude vygenerované:

.m-1 { margin: 1px; }

Aby to bolo flexibilnejšie, môžete urobiť svoje pravidlo dynamickým zmenou prvého argumentu na pravidle (nazývame ho matcher) na RegExp a tela na funkciu, napríklad:

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

Týmto spôsobom teraz môžete mať ľubovoľné margin utility, ako m-1, m-100 alebo m-52.43. A opäť, UnoCSS ich generuje iba vtedy, keď ich použijete.

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

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

Presets

Akonáhle vytvoríte niekoľko pravidiel, môžete ich extrahovať do presetu a zdieľať s ostatnými. Napríklad môžete vytvoriť preset pre dizajnový systém vašej spoločnosti a zdieľať ho s vaším tímom.

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, // váš vlastný preset
  ],
})

Podobne sme poskytli niekoľko oficiálnych presetov, ktoré môžete okamžite začať používať, a môžete tiež nájsť mnoho zaujímavých komunitných presetov.

Play

Môžete vyskúšať UnoCSS vo vašom prehliadači v Playground. Alebo si pozrieť utility z predvolených presetov v Interaktívnej dokumentácii.

Integrations

UnoCSS prichádza s integráciami pre rôzne frameworky / nástroje:

Examples

Zdrojový kód pre všetky príklady nájdete v adresári /examples.