Rules

Pravidlá definujú utility triedy a výsledné CSS. UnoCSS má mnoho vstavaných pravidiel, ale tiež umožňuje jednoduché pridávanie vlastných pravidiel.

Static rules

S týmto príkladom:

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

Nasledujúce CSS bude vygenerované, kedykoľvek sa m-1 nájde v kódovej báze používateľa:

.m-1 { margin: 0.25rem; }

Poznámka: Syntax tela nasleduje syntax CSS vlastností, napr. font-weight namiesto fontWeight. Ak je v názve vlastnosti pomlčka -, mala by byť v úvodzovkách.

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

Dynamic rules

Ak to chcete urobiť múdrejším, zmeňte matcher na RegExp a telo na funkciu:

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

Prvý argument funkcie tela je výsledok RegExp match, ktorý môže byť deštrukturovaný na získanie zhodných skupín.

Napríklad s nasledujúcim použitím:

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

bude vygenerované zodpovedajúce CSS:

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

Blahoželáme! Teraz máte svoje vlastné výkonné atomické CSS utility. Užívajte si to!

CSS Rules Fallback

V prípadoch, keď chcete využiť fallback CSS pravidiel na použitie nových CSS funkcií a zároveň mať možnosť fallbacku pre podporu starších prehliadačov, môžete voliteľne vrátiť 2D pole ako CSS reprezentáciu pre pravidlá s rovnakými kľúčmi. Napríklad:

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

Čo spôsobí, že h-100dvh vygeneruje:

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

Ordering

UnoCSS rešpektuje poradie pravidiel, ktoré ste definovali vo vygenerovanom CSS. Neskoršie majú vyššiu prioritu.

Pri použití dynamických pravidiel sa môže stať, že jedno pravidlo zodpovedá viacerým tokenom. Predvolene bude výstup tých, ktoré zodpovedajú jednému dynamickému pravidlu, zoradený abecedne v rámci skupiny.

Rules merging

Predvolene UnoCSS zlúči CSS pravidlá s rovnakým telom na minimalizáciu veľkosti CSS.

Napríklad <div class="m-2 hover:m2"> vygeneruje:

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

Namiesto dvoch samostatných pravidiel:

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

Special symbols

Od verzie v0.61 UnoCSS podporuje špeciálne symboly na definovanie ďalších meta informácií pre vaše generované CSS. Môžete pristupovať k symbolom z druhého argumentu funkcie dynamickej rule matcher.

Napríklad:

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

Vygeneruje:

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

Available symbols

• symbols.parent: Rodičovský obal generovaného CSS pravidla (napr. @supports, @media, atď.)
• symbols.selector: Funkcia na úpravu selektora generovaného CSS pravidla (pozri príklad nižšie)
• symbols.layer: Reťazec/funkcia/regex match, ktorý nastavuje vrstvu UnoCSS generovaného CSS pravidla
• symbols.variants: Pole handlerov variantov, ktoré sa aplikujú na aktuálny CSS objekt
• symbols.shortcutsNoMerge: Boolean na zakázanie zlúčenia aktuálneho pravidla v skratkách
• symbols.noMerge: Boolean na zakázanie zlúčenia aktuálneho pravidla v skratkách
• symbols.sort: Číslo na prepísanie poradia zoradenia aktuálneho CSS objektu

Multi-selector rules

Od verzie v0.61 UnoCSS podporuje viacnásobný selektor prostredníctvom JavaScript Generator functions.

Napríklad:

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)`
    }
  }],
]

Vygeneruje viacero CSS pravidiel:

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

Fully controlled rules

TIP

Toto je pokročilá funkcia, vo väčšine situácií nebude potrebná.

Ak skutočne potrebujete niektoré pokročilé pravidlá, ktoré nie sú pokryté kombináciou Dynamic Rules a Variants, UnoCSS tiež poskytuje spôsob, ako vám poskytnúť plnú kontrolu nad generovaním CSS.

Umožňuje vám vrátiť reťazec z funkcie tela dynamického pravidla, ktorý bude priamo odovzdaný do vygenerovaného CSS (čo tiež znamená, že sa musíte postarať o veci ako CSS escaping, aplikovanie variantov, konštrukciu CSS a tak ďalej).

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

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // zahodiť nezhodné pravidlá
      if (name.includes('something'))
        return

      // ak chcete, môžete zakázať varianty pre toto pravidlo
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // vrátiť reťazec namiesto objektu
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* môžete mať viacero pravidiel */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* alebo media queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})