Что такое UnoCSS?

UnoCSS - это мгновенный движок атомарного CSS, разработанный с гибкостью и расширяемостью. Ядро не имеет предвзятого мнения, и все CSS-утилиты предоставляются через пресеты.

Например, вы можете определить собственные CSS-утилиты, предоставив правила в локальном файле конфигурации.

import { defineConfig } from 'unocss'

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

Это добавит новую CSS-утилиту m-1 в ваш проект. Поскольку UnoCSS работает по требованию, он не сделает ничего, пока вы не используете его в вашей кодовой базе. Допустим, у нас есть компонент вроде этого:

html

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

m-1 будет обнаружен, и будет сгенерирован следующий CSS:

css

.m-1 { margin: 1px; }

Чтобы сделать это более гибким, вы можете сделать правило динамическим, изменив первый аргумент правила (мы называем его сопоставителем) на RegExp, а тело - на функцию, например:

diff

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

Сделав это, теперь у вас могут быть произвольные утилиты отступов, такие как m-1, m-100 или m-52.43. И снова, UnoCSS генерирует их только при их использовании.

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

Пресеты

Как только вы создадите несколько правил, вы можете извлечь их в пресет и поделиться ими с другими. Например, вы можете создать пресет для системы дизайна вашей компании и поделиться им со своей командой.

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, // ваш собственный пресет
  ],
})

Точно так же мы предоставили несколько официальных пресетов для немедленного использования, и вы также можете найти множество интересных пресетов сообщества.