Czym jest UnoCSS?

UnoCSS to natychmiastowy silnik atomic CSS, zaprojektowany aby być elastycznym i rozszerzalnym. Rdzeń jest nieopinionowany i wszystkie narzędzia CSS są dostarczane przez presety.

Na przykład, możesz zdefiniować własne niestandardowe narzędzia CSS, podając reguły w lokalnym pliku konfiguracyjnym.

import { defineConfig } from 'unocss'

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

To doda nowe narzędzie CSS m-1 do Twojego projektu. Ponieważ UnoCSS jest na żądanie, nie zrobi nic, dopóki nie użyjesz go w swoim kodzie. Więc powiedzmy, że mamy taki komponent:

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

m-1 zostanie wykryty i zostanie wygenerowany następujący CSS:

.m-1 { margin: 1px; }

Aby uczynić to bardziej elastycznym, możesz uczynić swoją regułę dynamiczną, zmieniając pierwszy argument reguły (nazywamy go matcher) na RegExp, a ciało na funkcję, na przykład:

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

W ten sposób możesz teraz mieć dowolne narzędzia do marginesów, takie jak m-1, m-100 lub m-52.43. I ponownie, UnoCSS generuje je tylko wtedy, gdy ich użyjesz.

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

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

Presety

Po utworzeniu kilku reguł, możesz je wyodrębnić w preset i udostępnić innym. Na przykład, możesz utworzyć preset dla systemu design Twojej firmy i udostępnić go swojemu zespołowi.

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, // twój własny preset
  ],
})

Podobnie, udostępniliśmy kilka oficjalnych presetów, abyś mógł od razu zacząć ich używać, a także możesz znaleźć wiele interesujących presetów społeczności.

Zabawa

Możesz wypróbować UnoCSS w przeglądarce, w Placach zabaw. Lub wyszukaj narzędzia z domyślnych presetów w Dokumentacji interaktywnej.

Integracje

UnoCSS jest dostarczany z integracjami dla różnych frameworków / narzędzi:

Przykłady

Kod źródłowy wszystkich przykładów można znaleźć w katalogu /examples.