Pravila

Pravila definirajo razrede pripomočkov in rezultajoči CSS. UnoCSS ima veliko vgrajenih pravil, vendar omogoča tudi enostavno dodajanje prilagojenih pravil.

Statična pravila

S tem primerom:

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

Bo generiran naslednji CSS, kadar je m-1 zaznan v uporabnikovi kodi:

.m-1 { margin: 0.25rem; }

Opomba: Sintaksa telesa sledi sintaksi lastnosti CSS, npr. font-weight namesto fontWeight. Če je v imenu lastnosti vezaj -, mora biti v narekovajih.

rules: [
  ['font-bold', { 'font-weight': 700 }],
]

Dinamična pravila

Če želite, da je pametnejše, spremenite ujemanje v RegExp in telo v funkcijo:

rules: [
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]

Prvi argument funkcije telesa je rezultat ujemanja RegExp, ki ga lahko razstavite za pridobitev ujemajočih se skupin.

Na primer, z naslednjo uporabo:

<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    My Button
  </button>
</div>

bo generiran ustrezen CSS:

.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

Čestitamo! Zdaj imate svoje močne atomske CSS pripomočke. Uživajte!

Nadomestna pravila CSS

V primerih, ko želite izkoristiti nadomestna pravila CSS za uporabo novih funkcij CSS, hkrati pa ohraniti podporo za stare brskalnike, lahko neobvezno vrnete 2D-polje kot predstavitev CSS za pravila z istimi ključi. Na primer:

rules: [
  [/^h-(\d+)dvh$/, ([_, d]) => {
    return [
      ['height', `${d}vh`],
      ['height', `${d}dvh`],
    ]
  }],
]

Kar bo povzročilo, da h-100dvh generira:

.h-100dvh { height: 100vh; height: 100dvh; }

Vrstni red

UnoCSS upošteva vrstni red pravil, ki ste jih definirali v generiranem CSS. Poznejši imajo višjo prioriteto.

Pri uporabi dinamičnih pravil se lahko ujemajo z več žetoni. Privzeto bo izhod tistih, ki se ujemajo pod enim dinamičnim pravilom, razvrščen abecedno znotraj skupine.

Združevanje pravil

Privzeto bo UnoCSS združil CSS pravila z istim telesom za zmanjšanje velikosti CSS.

Na primer, <div class="m-2 hover:m2"> bo generiral:

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

Namesto dveh ločenih pravil:

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

Posebni simboli

Od različice v0.61, UnoCSS podpira posebne simbole za definiranje dodatnih metapodatkov za vaš generirani CSS. Dostopate do simbolov iz drugega argumenta funkcije ujemanja dinamičnega pravila.

Na primer:

rules: [
  [/^grid$/, ([, d], { symbols }) => {
    return {
      [symbols.parent]: '@supports (display: grid)',
      display: 'grid',
    }
  }],
]

Bo generiralo:

@supports (display: grid) {
  .grid {
    display: grid;
  }
}

Razpoložljivi simboli

• symbols.parent: Starševski zavojnik generiranega CSS pravila (npr. @supports, @media, itd.)
• symbols.selector: Funkcija za spremembo selektorja generiranega CSS pravila (glej primer spodaj)
• symbols.layer: Niz/funkcija/regex ujemanje, ki nastavi UnoCSS sloj generiranega CSS pravila
• symbols.variants: Polje obravavnikov variant, ki se uporabijo za trenutni CSS predmet
• symbols.shortcutsNoMerge: Boolova vrednost za onemogočanje združevanja trenutnega pravila v bližnjicah
• symbols.noMerge: Boolova vrednost za onemogočanje združevanja trenutnega pravila v bližnjicah
• symbols.sort: Število za prepisovanje vrstnega reda trenutnega CSS predmeta

Pravila z več selektorji

Od različice v0.61, UnoCSS podpira več selektorjev prek generator funkcij JavaScript.

Na primer:

rules: [
  [/^button-(.*)$/, function* ([, color], { symbols }) {
    yield {
      background: color
    }
    yield {
      [symbols.selector]: selector => `${selector}:hover`,
      // https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
      background: `color-mix(in srgb, ${color} 90%, black)`
    }
  }],
]

Bo generiralo več CSS pravil:

.button-red {
  background: red;
}
.button-red:hover {
  background: color-mix(in srgb, red 90%, black);
}

Popolnoma nadzorovana pravila

TIP

To je napredna funkcija, v večini primerov ne bo potrebna.

Ko res potrebujete nekaj naprednih pravil, ki niso zajeta s kombinacijo dinamičnih pravil in variant, UnoCSS ponuja tudi način, da vam omogoči popoln nadzor nad generiranjem CSS.

Omogoča vam, da vrnete niz iz funkcije telesa dinamičnega pravila, ki bo neposredno posredovan generiranemu CSS (to pomeni, da morate poskrbeti za stvari, kot so izogibanje CSS, uporaba variant, konstruiranje CSS, itd.).

import { defineConfig, toEscapedSelector as e } from 'unocss'

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // zavrži neujemajoča se pravila
      if (name.includes('something'))
        return

      // če želite, lahko onemogočite variante za to pravilo
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // vrnite niz namesto predmeta
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* imate lahko več pravil */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* ali media queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})