Variante

Variante vam omogočajo uporabo nekaterih variacij na vaših obstoječih pravilih, kot je varianta hover: iz Tailwind CSS.

Primer

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // odreži predpono `hover:` in posreduj naslednjim variantam in pravilom
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher nadzoruje, kdaj je varianta omogočena. Če je vrnjena vrednost niz, bo uporabljen kot selektor za ujemanje s pravili.
• selector zagotavlja možnost prilagajanja generiranega CSS selektorja.

Pod kapo

Oglejmo si, kaj se zgodi pri ujemanju za hover:m-2:

• hover:m-2 je izvlečen iz uporabnikove uporabe
• hover:m-2 poslan vsem variantam za ujemanje
• hover:m-2 se ujema z našo varianto in vrne m-2
• rezultat m-2 bo uporabljen za naslednji krog ujemanja variant
• če se nobena druga varianta ne ujema, bo m-2 šel na ujemanje s pravili
• naše prvo pravilo se ujema in generira .m-2 { margin: 0.5rem; }
• končno uporabimo transformacijo naših variant na generirani CSS. V tem primeru smo dodali :hover na hook selector

Kot rezultat bo generiran naslednji CSS:

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

S tem lahko uporabimo m-2 le, ko uporabnik z miško prehaja čez element.

Naprej

Sistem variant je zelo zmogljiv in ga ni mogoče v celoti pokriti v tem vodniku, si oglejte implementacijo privzete prednastavitve za več naprednih uporab.