什么是 UnoCSS？

UnoCSS 是一个即时原子化 CSS 引擎，它被设计为灵活且可扩展的。其核心是无主见的，所有的 CSS 工具类都通过预设提供。

例如，你可以通过在本地的配置文件中提供规则来定义自定义的 CSS 工具类。

uno.config.ts

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，并将主体改为一个函数来使你的规则变得动态，例如：

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 只会在你使用这些工具类时才会生成相应的 CSS。

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

预设

一旦你创建了一些规则，你可以将它们提取到一个预设中，并与他人分享。例如，你可以为你公司的设计系统创建一个预设，并与你的团队共享。

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, // your own preset
  ],
})