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

为了使其更灵活，你可以修改上述规则的第一个参数（我们称之为匹配器）为正则表达式，并将主体改为函数，来使规则动态化，例如：

diff

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

通过这样做，你就得到了一个任意 margin 解析工具，像 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; }

预设

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

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