规则

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

静态规则

使用示例:

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

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

.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 实用工具。享受吧！

完全受控的规则

TIP

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

当你确实需要一些高级规则，而这些规则不能通过 动态规则 和 变体 的组合来实现时，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 }) => {
      // 丢弃不匹配的规则
      if (name.includes('something'))
        return

      // 如果你愿意，你可以禁用这个规则的变体
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // 返回一个字符串而不是一个对象
      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};
  }
}
`
    }],
  ],
})

排序

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; }