变体

🌐 Variants

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

示例

🌐 Example

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 选择器的功能。

在引擎盖下

🌐 Under the hood

让我们来看一下匹配 hover:m-2 时发生了什么：

🌐 Let's have a tour of what happened when matching for 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：

🌐 As a result, the following CSS will be generated:

css

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

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

🌐 With this, we could have m-2 applied only when users hover over the element.

更进一步

🌐 Going further

变体系统非常强大，无法在本指南中完全覆盖，你可以查看默认预设的实现以了解更多高级用法。

🌐 The variant system is very powerful and can't be covered fully in this guide, you can check the default preset's implementation to see more advanced usages.

变体 ​

示例 ​

在引擎盖下 ​

更进一步 ​

变体

示例

在引擎盖下

更进一步