Что такое UnoCSS?

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

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

uno.config.ts

import { defineConfig } from 'unocss'

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

Это добавит в ваш проект новую CSS-утилиту m-1. Поскольку UnoCSS работает по принципу «on-demand» (только по запросу), она ничего не сделает, пока вы не используете её в коде. Допустим, у нас есть такой компонент:

html

<div class="m-1">Привет</div>

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

css

.m-1 { margin: 1px; }

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

uno.config.ts

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">Привет</div>
<div class="m-7.5">мир</div>

css

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

Пресеты

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

my-preset.ts

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: [/* ... */],
  // ...
}

uno.config.ts

import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset, // ваш собственный пресет
  ],
})

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