什么是 UnoCSS？

UnoCSS 是一个即时的原子化 CSS 引擎，旨在灵活和可扩展。核心是不拘一格的，所有的 CSS 工具类都是通过预设提供的。

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

// uno.config.ts
import { defineConfig } from 'unocss'

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

// 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>

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

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

css

.m-1 {
  margin: 1px;
}

.m-1 {
  margin: 1px;
}

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

diff

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

// 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>

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

css

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

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

// 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 // 您自己的预设
  ]
})

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

export default defineConfig({
  presets: [
    myPreset // 您自己的预设
  ]
})

同样的，我们提供了一些官方预设可以让您马上开始使用，您也可以找到很多有趣的社区预设.

交互式文档

您可以在 Playground 中尝试 UnoCSS。或者在交互式文档中查找默认预设中的工具类。

集成

UnoCSS 集成了各种框架工具：

例子

所有示例的源代码都可以在 /examples 目录中找到。

什么是 UnoCSS？ ​

预设 ​

交互式文档 ​

集成 ​

例子 ​

什么是 UnoCSS？

预设

交互式文档

集成

例子