深入理解 UnoCSS：即时原子化 CSS 引擎指南-优快云博客

深入理解 UnoCSS：即时原子化 CSS 引擎指南

unocss 项目地址: https://gitcode.com/gh_mirrors/uno/unocss

什么是 UnoCSS？

UnoCSS 是一款即时原子化 CSS 引擎，它的设计理念是灵活性和可扩展性。与传统的 CSS 框架不同，UnoCSS 的核心是无预设观点的，所有 CSS 工具类都是通过预设(presets)提供的。

核心概念解析

原子化 CSS 原理

原子化 CSS 是一种将样式分解为最小可复用单元的方法论。UnoCSS 将这一理念发挥到极致，它：

按需生成 CSS，只有被使用的样式才会被包含在最终输出中
具有极高的灵活性，允许开发者自定义任何样式规则
通过预设系统实现功能扩展

基本配置示例

让我们从一个简单的配置开始理解 UnoCSS 的工作原理：

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

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

这段代码定义了一个名为 m-1 的原子类，当在 HTML 中使用 <div class="m-1"> 时，UnoCSS 会自动生成对应的 CSS：

.m-1 { margin: 1px; }

动态规则进阶

UnoCSS 的真正强大之处在于它支持动态规则定义。通过正则表达式和函数，我们可以创建灵活的样式模式：

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

这种模式匹配规则允许我们使用任意数值的 margin 类，如 m-1、m-100 甚至 m-52.43，UnoCSS 会智能地只为实际使用的类生成 CSS。

预设系统详解

创建自定义预设

当积累了一定数量的规则后，可以将它们组织成预设(preset)，方便复用和共享：

// 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` })],
  ],
  // 还可以定义变体、快捷方式等
}

使用预设

在配置文件中引入预设：

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

export default defineConfig({
  presets: [
    myPreset, // 你的自定义预设
  ],
})