Kaj je UnoCSS?

UnoCSS je trenutni atomski CSS pogon, ki je zasnovan tako, da je prilagodljiv in razširljiv. Jedro je nevtralno in vse CSS pripomočke zagotavljajo prednastavitve.

Na primer, lahko definirate svoje prilagojene CSS pripomočke z zagotavljanjem pravil v vaši lokalni konfiguracijski datoteki.

import { defineConfig } from 'unocss'

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

To bo dodalo nov CSS pripomoček m-1 vašemu projektu. Ker je UnoCSS na-zahtevo, ne bo naredil ničesar, dokler ga ne uporabite v vaši kodi. Recimo, da imate komponento kot to:

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

m-1 bo zaznan in generiran bo naslednji CSS:

.m-1 { margin: 1px; }

Da bo bolj prilagodljivo, lahko naredite svoje pravilo dinamično s spremembo prvega argumenta na pravilu (imenujemo ga ujemanje) v RegExp in telesa v funkcijo, na primer:

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

S tem boste lahko imeli poljubne pripomočke za margin, kot so m-1, m-100 ali m-52.43. In spet, UnoCSS jih generira le, ko jih uporabite.

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

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

Prednastavitve

Ko naredite nekaj pravil, jih lahko izvlečete v prednastavitev in delite z drugimi. Na primer, lahko ustvarite prednastavitev za oblikovalski sistem vašega podjetja in jo delite z vašo ekipo.

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, // vaša lastna prednastavitev
  ],
})

Podobno vam ponujamo nekaj uradnih prednastavitev za takojšnjo uporabo in najdete lahko tudi veliko zanimivih prednastavitev skupnosti.

Igranje

UnoCSS lahko preizkusite v brskalniku, v Igrališču. Ali pa si oglejte pripomočke iz privzetih prednastavitev v Interaktivnih dokumentih.

Integracije

UnoCSS prihaja z integracijami za različne okvire/orodja:

Primeri

Izvorna koda vseh primerov je na voljo v imeniku /examples.