Regler

Regler definierar verktygsklasser och den resulterande CSS:en. UnoCSS har många inbyggda regler men tillåter också att enkelt lägga till anpassade regler.

Statiska regler

Med detta exempel:

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

Följande CSS kommer att genereras när m-1 upptäcks i användarens kodbas:

.m-1 { margin: 0.25rem; }

Obs: Body-syntaxen följer CSS-egenskapssyntax, t.ex. font-weight istället för fontWeight. Om det finns ett bindestreck - i egenskapsnamnet bör det citeras.

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

Dynamiska regler

För att göra det smartare, ändra matcharen till en RegExp och bodyn till en funktion:

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

Den första argumentet för body-funktionen är RegExp-matchningsresultatet som kan dekonstrueras för att få de matchade grupperna.

Till exempel, med följande användning:

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

kommer motsvarande CSS att genereras:

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

Grattis! Nu har du dina egna kraftfulla atomära CSS-verktyg. Varsågod!

CSS-regler Fallback

I fall där du kanske vill använda CSS-regler fallback för att använda nya CSS-funktioner samtidigt som du kan falla tillbaka för att stödja gamla webbläsare, kan du valfritt returnera en 2D-array som CSS-representation för regler med samma nycklar. Till exempel:

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

Vilket gör att h-100dvh genererar:

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

Ordning

UnoCSS respekterar ordningen på reglerna du definierade i den genererade CSS:en. Senare har högre prioritet.

När du använder dynamiska regler kan det matcha flera tokens. Som standard kommer utdata för de som matchas under en enda dynamisk regel att sorteras alfabetiskt inom gruppen.

Regler-sammanslagning

Som standard kommer UnoCSS att slå samman CSS-regler med samma body för att minimera CSS-storleken.

Till exempel, <div class="m-2 hover:m2"> kommer att generera:

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

Istället för två separata regler:

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

Specialsymboler

Sedan v0.61 stöder UnoCSS specialsymboler för att definiera ytterligare metadata för din genererade CSS. Du kan komma åt symboler från det andra argumentet i den dynamiska regelmatchningsfunktionen.

Till exempel:

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

Kommer att generera:

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

Tillgängliga symboler

• symbols.parent: Den överordnade containern för den genererade CSS-regeln (t.ex. @supports, @media, etc.)
• symbols.selector: En funktion för att modifiera selektorn för den genererade CSS-regeln (se exemplet nedan)
• symbols.layer: En sträng/funktion/regex-matchning som ställer in UnoCSS-lagret för den genererade CSS-regeln
• symbols.variants: En array av variant-hanterare som tillämpas på det aktuella CSS-objektet
• symbols.shortcutsNoMerge: En boolean för att inaktivera sammanslagning av den aktuella regeln i genvägar
• symbols.noMerge: En boolean för att inaktivera sammanslagning av den aktuella regeln i genvägar
• symbols.sort: Ett nummer för att skriva över sorteringsordningen för det aktuella CSS-objektet

Multi-selektor regler

Sedan v0.61 stöder UnoCSS multi-selektor via JavaScript Generator-funktioner.

Till exempel:

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

Kommer att generera flera CSS-regler:

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

Fullt kontrollerade regler

TIP

Detta är en avancerad funktion, i de flesta situationer kommer det inte att behövas.

När du verkligen behöver några avancerade regler som inte täcks av kombinationen av dynamiska regler och varianter, tillhandahåller UnoCSS också ett sätt att ge dig full kontroll för att generera CSS:en.

Det tillåter dig att returnera en sträng från den dynamiska regelns body-funktion som kommer att direkt skickas till den genererade CSS:en (detta innebär också att du måste ta hand om saker som CSS-escaping, variant-tillämpning, CSS-konstruktion, och så vidare).

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

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // kassera mismatchande regler
      if (name.includes('something'))
        return

      // om du vill, kan du inaktivera varianterna för denna regel
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // returnera en sträng istället för ett objekt
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* du kan ha flera regler */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* eller media queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})