规则

规则定义实用程序类及其生成的 CSS。UnoCSS 具有许多内置规则，但也允许轻松添加自定义规则。

静态规则

通过此示例

rules: [
  ['m-1', { margin: '0.25rem' }],
]

以下 CSS 将在用户代码库中检测到 m-1 时生成

.m-1 { margin: 0.25rem; }

注意：主体语法遵循 CSS 属性语法，例如 font-weight 而不是 fontWeight。如果属性名称中包含连字符 -，则应将其引号。

rules: [
  ['font-bold', { 'font-weight': 700 }],
]

动态规则

为了使其更智能，将匹配器更改为 RegExp，并将主体更改为函数

rules: [
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]

主体函数的第一个参数是 RegExp 匹配结果，可以解构以获取匹配的组。

例如，使用以下用法

<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    My Button
  </button>
</div>

将生成相应的 CSS

.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

恭喜！现在您拥有了自己的强大原子 CSS 实用程序。尽情享受吧！

CSS 规则回退

在您可能希望利用 CSS 规则回退来使用新 CSS 功能，同时能够回退以支持旧浏览器的某些情况下，您可以选择将二维数组作为具有相同键的规则的 CSS 表示返回。例如

rules: [
  [/^w-(\d+)dvh$/, ([_, d]) => {
    return [
      ['width', `${d}vh`],
      ['width', `${d}dvh`],
    ]
  }],
]

这将使 w-100dvh 生成

.w-100dvh { width: 100vh; width: 100dvh; }

排序

UnoCSS 尊重您在生成的 CSS 中定义的规则顺序。后者的优先级更高。

使用动态规则时，它可能匹配多个令牌。默认情况下，在一个动态规则下匹配的这些令牌的输出将在组内按字母顺序排序。

规则合并

默认情况下，UnoCSS 将合并具有相同主体的 CSS 规则以最小化 CSS 大小。

例如，<div class="m-2 hover:m2"> 将生成

.hover\:m2:hover, .m-2 { margin: 0.5rem; }

而不是两个单独的规则

.hover\:m2:hover { margin: 0.5rem; }
.m-2 { margin: 0.5rem; }

特殊符号

从 v0.61 开始，UnoCSS 支持使用特殊符号为生成的 CSS 定义额外的元信息。您可以从动态规则匹配器函数的第二个参数访问符号。

例如

rules: [
  [/^grid$/, ([, d], { symbols }) => {
    return {
      [symbols.parent]: '@supports (display: grid)',
      display: 'grid',
    }
  }],
]

将生成

@supports (display: grid) {
  .grid {
    display: grid;
  }
}

可用符号

• symbols.parent：生成的 CSS 规则的父级包装器（例如 @supports、@media 等）
• symbols.selector：一个修改生成的 CSS 规则选择器的函数（见下例）
• symbols.layer：一个字符串/函数/正则表达式匹配，设置生成的 CSS 规则的 UnoCSS 层
• symbols.variants：应用于当前 CSS 对象的变体处理程序数组
• symbols.shortcutsNoMerge：一个布尔值，用于禁用当前规则在快捷键中的合并

多选择器规则

从 v0.61 开始，UnoCSS 通过 JavaScript 生成器函数 支持多选择器。

例如

rules: [
  [/^button-(.*)$/, function* ([, color], { symbols }) {
    yield {
      background: color
    }
    yield {
      [symbols.selector]: selector => `${selector}:hover`,
      // https://mdn.org.cn/en-US/docs/Web/CSS/color_value/color-mix
      background: `color-mix(in srgb, ${color} 90%, black)`
    }
  }],
]

将生成多个 CSS 规则

.button-red {
  background: red;
}
.button-red:hover {
  background: color-mix(in srgb, red 90%, black);
}

完全受控规则

提示

这是一个高级功能，在大多数情况下不需要。

当您确实需要一些无法通过 动态规则 和 变体 的组合覆盖的高级规则时，UnoCSS 还提供了一种方法来让您完全控制生成 CSS。

它允许您从动态规则的主体函数返回一个字符串，该字符串将直接传递给生成的 CSS（这也意味着您需要处理 CSS 转义、变体应用、CSS 构建等）。

uno.config.ts

import { defineConfig, toEscapedSelector as e } from 'unocss'

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // discard mismatched rules
      if (name.includes('something'))
        return

      // if you want, you can disable the variants for this rule
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // return a string instead of an object
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* you can have multiple rules */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* or media queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})