Ce este UnoCSS?

UnoCSS este motorul atomic CSS instantaneu, conceput pentru a fi flexibil și extensibil. Nucleul este ne-opinionat și toate utilitățile CSS sunt furnizate prin preset-uri.

De exemplu, puteți defini propriile utilități CSS personalizate, prin furnizarea regulilor în fișierul de configurare local.

import { defineConfig } from 'unocss'

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

Aceasta va adăuga o nouă utilitate CSS m-1 în proiectul dvs. Deoarece UnoCSS este la cerere, nu va face nimic până nu o utilizați în codul dvs. Așadar, să spunem că avem o componentă ca aceasta:

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

m-1 va fi detectat și următorul CSS va fi generat:

.m-1 { margin: 1px; }

Pentru a-l face mai flexibil, puteți face regula dinamică schimbând primul argument al regulii (îl numim matcher) într-un RegExp, iar corpul într-o funcție, de exemplu:

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

Prin doing acest lucru, acum puteți avea utilități arbitrare de margine, cum ar fi m-1, m-100 sau m-52.43. Și din nou, UnoCSS le generează doar când le utilizați.