本篇博客翻译自UnoCSS guide

UnoCSS是一个即时的原子CSS引擎，旨在具有灵活性和可扩展性。其核心是无偏见的，所有的CSS实用工具都通过预设提供。

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

1
2
3
4
5
6
7
8
// uno.config.ts
import { defineConfig } from 'unocss'

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

这将向您的项目添加一个新的CSS实用工具m-1。由于UnoCSS是按需加载的，只有在您在代码库中使用它时才会生效。假设我们有一个如下的组件：

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

m-1将被检测到，并生成以下的CSS代码：

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

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

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

通过这样做，现在您可以拥有任意的边距实用工具，例如m-1、m-100或m-52.43。而且，UnoCSS只在您使用它们时才会生成相应的样式。

1
2
<div class="m-1">Hello</div>
<div class="m-7.5">World</div>
1
2
.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

预设

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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: [/* ... */]
  // ...
}
1
2
3
4
5
6
7
8
9
// uno.config.ts
import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset // your own preset
  ],
})

同样地，我们提供了一些官方预设供您立即开始使用，并且您还可以找到许多有趣的社区预设。