Varianten

Varianten ermöglichen es Ihnen, einige Variationen auf Ihre bestehenden Regeln anzuwenden, wie die hover: Variante aus Tailwind CSS.

Beispiel

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // Schneiden Sie das `hover:` Präfix ab und übergeben Sie es an die nächsten Varianten und Regeln
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher steuert, wann die Variante aktiviert ist. Wenn der Rückgabewert ein String ist, wird er als Selektor zum Abgleichen der Regeln verwendet.
• selector bietet die Möglichkeit, den generierten CSS-Selektor anzupassen.

Unter der Haube

Lassen Sie uns einen Rundgang durch das machen, was beim Abgleichen von hover:m-2 passiert:

• hover:m-2 wird aus den Benutzerverwendungen extrahiert
• hover:m-2 wird an alle Varianten zum Abgleichen gesendet
• hover:m-2 wird von unserer Variante abgeglichen und gibt m-2 zurück
• Das Ergebnis m-2 wird für die nächste Runde der Varianten-Abgleichung verwendet
• Wenn keine andere Variante abgeglichen wird, geht m-2 dann zum Abgleichen der Regeln
• Unsere erste Regel wird abgeglichen und generiert .m-2 { margin: 0.5rem; }
• Schließlich wenden wir die Transformation unserer Varianten auf das generierte CSS an. In diesem Fall haben wir :hover an den selector Hook vorangestellt

Als Ergebnis wird das folgende CSS generiert:

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

Damit könnten wir m-2 nur anwenden, wenn Benutzer über das Element hovern.

Weitergehen

Das Varianten-System ist sehr leistungsstark und kann in diesem Leitfaden nicht vollständig abgedeckt werden. Sie können die Implementierung des Standard-Presets überprüfen, um erweiterte Verwendungen zu sehen.