unocss 的使用

官网/guide/对 unocss 进行了详细的介绍，这里只记录要点。

unocss 集成

官网有介绍并推荐使用专用的位于根目录的配置文件来对 unocss 进行配置，这要能得到更好的 IDE 支持和其他集成。不过官网也给出了使用 vite 集成 unocss 的解决方案，简单地说就是通过 unocss/vite 包默认暴露的方法来将 unocss 配置为 vite 的插件，然后将，该插件传递给的 plugins 配置中。详细可查文档。

配置

unocss 的配置项有以下这些：

preset：预置，用于配置预置的一些配置。
rules：定义规则。
shortcuts：定义简写。
theme：定义主题变量。
variants：将自定义约定应用于规则。
transformers：按照官方的说法，转换器用于转换源代码以支持约定。它提供了一个统一的接口来转换源代码以支持约定。
其他。

下面分别详细介绍这些配置的功能和配置方法。

preset

preset 是 unocss 的核心之一，在这里我们可以选择是否使用 unocss 本身的配置，以及我们还可以自定义自己的 preset 团队及自己用。比如如果我们需要使用 unocss 自己的 rules，就需要在 preset 配置中添加 presetUno 配置，如果使用通过属性来添加样式类名的功能就需要将 presetAttributify 配置到 preset 中。

rules

用来自定义生成 css 的规则，比如我们进行如下设置：

rules: [['ml-1', { 'margin-left': '8px' }]]

那么我们在元素或者组件上面就可以这样写来控制元素的样式：

<a-button type="primary" class="ml-1" important-color-red @click="handleClick">{{ a }}</a-button>

但是这样配置有个缺点：不够灵活，unocss 提供了更加灵活的配置方式：

rules: [[/^ml-(\d+)$/, ([, d]) => ({ 'margin-left': `${parseInt(d) * 8}px` })]]

这样子就可以这样子更加灵活地去写样式：

<template>
  <div>
    <a-button type="primary" status="danger" ml-2>Danger Button</a-button>
  </div>
  <div>
    <a-button type="primary" status="danger" ml-3>Danger Button</a-button>
  </div>
</template>

shortcuts

按照官方的介绍，shortcuts 可以让我们把多个 rule 合并为一个简写形式。用法举例：

shortcuts: {
    'flex-center': ["flex", "justify-center", "items-center"],
    'flex-btw': ["flex", "flex-justify-between", "items-center"]
}

theme

unocss 同样支持主题系统，我们可以在配置中通过配置 theme 字段来主题变量，和 Mui 的主题配置是有类似的地方的。用法：

theme: {
      colors: {
        primary: '#3f51b5',
        light: '#fff'
      }
    }

当然 theme 配置项不只是配置颜色，还可以配置断点（breakpoints）等，具体查看官方文档。

variants

variants 允许我们对现有的规则应用一些变体，比如下面的例子：

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('children:')) return matcher
    return {
      // slice `hover:` prefix and passed to the next variants and rules
      matcher: matcher.slice(9),
      selector: (s) => `${s}>*`
    }
  }
]

这个 variants 定义好后，我们在组件中这样使用：

<div children:ml-5>
  <p text-light bg-primary>this is primary text</p>
</div>
<div children:ml-10>
  <p text-light bg-primary>this is primary text</p>
</div>

unocss 会生成如下的 css 配置：

[children\:ml-5=''] > * {
  margin-left: 40px;
}

[children\:ml-10=''] > * {
  margin-left: 80px;
}

我们还可以用 hover 效果来举例：
配置：

// hover
variants: [
  (matcher) => {
    if (!matcher.startsWith('hover:')) return matcher
    return {
      // slice `hover:` prefix and passed to the next variants and rules
      matcher: matcher.slice(6),
      selector: (s) => `${s}:hover`
    }
  }
]

使用：

<p text-light bg-primary hover:bg-white hover:text-primary>this is primary text</p>

生成的 css：

[hover\:text-primary='']:hover {
  --un-text-opacity: 1;
  color: rgba(63, 81, 181, var(--un-text-opacity));
}

[hover\:bg-white='']:hover {
  --un-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--un-bg-opacity));
}

unocss 的使用