UnoCSS

Unocss 是一个基于 Vue 的 CSS 框架，旨在通过自动化和智能化的方式来简化和优化 CSS 开发。Unocss 的核心思想是根据项目的实际使用情况，自动地生成最小化的、仅包含所需样式的 CSS 文件，从而提高性能并减少不必要的样式代码。

样式重置

安装

npm install @unocss/reset

使用

在 main.js 中添加以下任意一个重置样式表。

normalize.css

import '@unocss/reset/normalize.css'

Tailwind compat

import '@unocss/reset/tailwind-compat.css'

集成Vite

安装

npm install -D unocss

配置 vite.config.ts

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [UnoCSS()]
})

创建 uno.config.ts

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

export default defineConfig({
  // ...UnoCSS选项
})

将 virtual:uno.css 添加到 main.ts

// main.ts
import 'virtual:uno.css'

配置文件

强烈推荐使用一个专用的 uno.config.ts 文件来配置您的 UnoCSS，以便在 IDE 和其他集成中获得最佳体验。

自定义规则 Rules

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

export default defineConfig({
    rules: [
        // 静态规则
        ['m-1', { margin: '0.25rem' }],
        // 动态规则
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
        [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })]
    ]
})

快捷方式 Shortcuts

import { defineConfig } from 'unocss'

export default defineConfig({
    shortcuts: [
        // 静态规则
        { btn: 'py-2 px-4 font-semibold rounded-lg shadow-md' },
        // 动态规则
        [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`]
    ]
})

主题 Theme

import { defineConfig } from 'unocss'

export default defineConfig({
    theme: {
    // ...
    colors: {
        'veryCool': '#0000ff', // class="text-very-cool"
        'brand': {
        'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary"
        }
    },
    }
})

预检 Preflights

从配置中注入原始 css 作为预处理。解析的 theme 可用于自定义 css。

import { defineConfig } from 'unocss'

export default defineConfig({
    preflights: [
        {
            getCSS: ({ theme }) => `
            * {
                color: ${theme.colors.gray?.[700] ?? '#333'};
                padding: 0;
                margin: 0;
            }
            `
        }
    ]
})

自定义预设 Presets

• 编写预设

// my-preset.ts
import { Preset } from 'unocss'

export default function myPreset(options: MyPresetOptions): Preset {
  return {
    name: 'my-preset',
    rules: [
      // ...
    ],
    variants: [
      // ...
    ]
    // 它支持您在根配置中拥有的大多数配置
  }
}

• 使用自定义预设

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

export default defineConfig({
  presets: [
    myPreset({
      /* 预设选项 */
    })
  ]
})

官方包

预设 Presets

Uno(默认)

• 安装

npm install -D @unocss/preset-uno

参考 TailWindCSS 用法。

属性化 Attributify

• 安装

npm install -D @unocss/preset-attributify

// uno.config.ts
import presetAttributify from '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetAttributify({
      /* preset options */
    })
    // ...
  ]
})

• 属性化模式

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

• 前缀自引用

对于具有与前缀相同的工具类（如 flex、grid、border）的工具类，提供了一个特殊的 ~ 值。

<button border="~ red">Button</button>

• 无值属性

<div m-2 rounded text-teal-400 />

• 属性冲突

如果属性名称与元素或组件的属性名称发生冲突，可以在属性名称前添加 un- 前缀以指定为 UnoCSS 的属性模式。

<a un-text="red">Text color to red</a>

TIP

默认情况下前缀是可选的，如果要强制使用前缀，可以设置：

presetAttributify({
  prefix: 'un-',
  prefixedOnly: true
})

也可以通过以下方式禁用某些属性的扫描：

presetAttributify({
  ignoreAttributes: [
    'text'
    // ...
  ]
})

Rem to px

• 安装

npm install -D @unocss/preset-rem-to-px

// uno.config.ts
import { defineConfig } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'

export default defineConfig({
  presets: [
    presetRemToPx()
    // ...other presets
  ]
})

转换器 Transformers

变体组 Variant group

• 安装

npm install -D @unocss/transformer-variant-group

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

• 使用

<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

指令 Directives

支持 @apply、@screen 和 theme() 指令。

• 安装

npm install -D @unocss/transformer-directives

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

第三方包

检查器 Inspector

在 Vite 开发服务器中访问 localhost:5173/__unocss 来查看检查器。