变体

变体允许您对现有规则应用一些变体，例如 Tailwind CSS 中的 hover: 变体。

示例

ts

variants: [
  // hover:
  (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`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

matcher 控制何时启用变体。如果返回值是字符串，它将用作匹配规则的选择器。
selector 提供定制生成的 CSS 选择器的功能。

幕后

让我们了解一下匹配 hover:m-2 时发生了什么。

hover:m-2 从用户的使用中提取出来。
hover:m-2 被发送到所有变体进行匹配。
hover:m-2 被我们的变体匹配并返回 m-2。
结果 m-2 将用于下一轮变体匹配。
如果没有其他变体被匹配，m-2 就会去匹配规则。
我们的第一个规则被匹配并生成 .m-2 { margin: 0.5rem; }。
最后，我们将变体的转换应用到生成的 CSS。在这种情况下，我们在 selector 钩子上添加了 :hover。

结果，将生成以下 CSS。

css

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

这样，我们就可以在用户将鼠标悬停在元素上时应用 m-2。

更进一步

变体系统非常强大，本指南无法完全涵盖，您可以查看默认预设的实现以了解更高级的使用方式。