规则

规则定义了UnoCSS为代码库搜索和生成CSS的方式。

静态规则

比如:

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

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

.m-1 { margin: 0.25rem; }

动态规则

要使其更智能，请将matcher更改为RegExp，将body更改为函数：

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实用程序。享受

完全匹配规则

WARNING

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

当您确实需要一些 Dynamic Rules and Variants组合无法覆盖的高级规则时, UnoCSS还提供了一种方法，可以让您完全控制CSS的生成。

通过从动态规则的主体函数返回一个string，它将直接传递给生成的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};
  }
}
`
    }],
  ],
})

排序

UnoCSS尊重您在生成的CSS中定义的规则的顺序。后者具有更高的优先级。 当使用动态规则时，它可能会匹配多个令牌。默认情况下，在单个动态规则下匹配的输出将在组中按字母顺序排序。

规则合并

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

比如, <div class="m-2 hover:m2"> will generate:

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

而不是两个单独的规则：

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