Reguli

Regulile definesc clasele de utilități și CSS-ul rezultat. UnoCSS are multe reguli încorporate, dar permite și adăugarea ușoară de reguli personalizate.

Reguli statice

Cu acest exemplu:

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

Următorul CSS va fi generat de fiecare dată când m-1 este detectat în codul utilizatorului:

.m-1 { margin: 0.25rem; }

Notă: Sintaxa corpului urmează sintaxa proprietății CSS, de ex. font-weight în loc de fontWeight. Dacă există un cratime - în numele proprietății, acesta trebuie citat.

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

Reguli dinamice

Pentru a-l face mai inteligent, schimbați matcher-ul într-un RegExp și corpul într-o funcție:

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

Primul argument al funcției corp este rezultatul potrivirii RegExp care poate fi destructurat pentru a obține grupurile potrivite.

De exemplu, cu următoarea utilizare:

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

CSS-ul corespunzător va fi generat:

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

Felicitări! Acum aveți propriile utilități CSS atomice puternice. Bucurați-vă!

Reguli CSS Fallback

În cazurile în care poate doriți să profitați de regulile CSS fallback pentru a utiliza funcții CSS noi, având în același timp posibilitatea de a face fallback pentru a suporta browsere vechi, puteți returna opțional un array 2D ca reprezentare CSS pentru regulile cu aceleași chei. De exemplu:

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

Care va face ca h-100dvh să genereze:

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

Ordonare

UnoCSS respectă ordinea regulilor pe care le-ați definit în CSS-ul generat. Cele ulterioare au prioritate mai mare.

Când utilizați reguli dinamice, acestea pot potrivi mai multe token-uri. În mod implicit, ieșirea celor potriviți sub o singură regulă dinamică va fi sortată alfabetic în cadrul grupului.

Îmbinarea regulilor

În mod implicit, UnoCSS va îmbina regulile CSS cu același corp pentru a minimiza dimensiunea CSS.

De exemplu, <div class="m-2 hover:m2"> va genera:

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

În loc de două reguli separate:

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

Simboluri speciale

Din versiunea v0.61, UnoCSS suportă simboluri speciale pentru a defini informații meta suplimentare pentru CSS-ul generat. Puteți accesa simbolurile din al doilea argument al funcției matcher a regulii dinamice.

De exemplu:

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

Va genera:

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

Simboluri disponibile

• symbols.parent: Wrapper-ul părinte al regulii CSS generate (ex. @supports, @media, etc.)
• symbols.selector: O funcție pentru a modifica selectorul regulii CSS generate (vezi exemplul de mai jos)
• symbols.layer: Un string/funcție/regex care setează stratul UnoCSS al regulii CSS generate
• symbols.variants: Un array de handleri de variante care sunt aplicați la obiectul CSS curent
• symbols.shortcutsNoMerge: Un boolean pentru a dezactiva îmbinarea regulii curente în shortcuts
• symbols.noMerge: Un boolean pentru a dezactiva îmbinarea regulii curente în shortcuts
• symbols.sort: Un număr pentru a suprascrie ordinea de sortare a obiectului CSS curent

Reguli cu selectori multipli

Din versiunea v0.61, UnoCSS suportă selectori multipli prin funcții generatoare JavaScript.

De exemplu:

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

Va genera multiple reguli CSS:

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

Reguli complet controlate

TIP

Aceasta este o funcție avansată, în majoritatea situațiilor nu va fi necesară.

Când aveți într-adevăr nevoie de câteva reguli avansate care nu sunt acoperite de combinația dintre Reguli dinamice și Variante, UnoCSS oferă, de asemenea, o modalitate de a vă oferi control complet pentru a genera CSS.

Vă permite să returnați un string din funcția corp a regulii dinamice care va fi direct transmis CSS-ului generat (aceasta înseamnă, de asemenea, că trebuie să aveți grijă de lucruri precum escaparea CSS, aplicarea variantelor, construirea CSS-ului și așa mai departe).

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

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // respinge regulile care nu se potrivesc
      if (name.includes('something'))
        return

      // dacă doriți, puteți dezactiva variantele pentru această regulă
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // returnează un string în loc de un obiect
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* puteți avea multiple reguli */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* sau media queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})