Regeln

Regeln definieren Utility-Klassen und das resultierende CSS. UnoCSS hat viele eingebaute Regeln, ermöglicht aber auch das einfache Hinzufügen benutzerdefinierter Regeln.

Statische Regeln

Mit diesem Beispiel:

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

Das folgende CSS wird generiert, wann immer m-1 in der Codebasis der Benutzer erkannt wird:

.m-1 { margin: 0.25rem; }

Hinweis: Die Body-Syntax folgt der CSS-Eigenschafts-Syntax, z. B. font-weight anstelle von fontWeight. Wenn ein Bindestrich - im Eigenschaftsnamen vorhanden ist, sollte er in Anführungszeichen gesetzt werden.

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

Dynamische Regeln

Um es intelligenter zu machen, ändern Sie den Matcher zu einem RegExp und den Body zu einer Funktion:

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

Das erste Argument der Body-Funktion ist das RegExp Match-Ergebnis, das destrukturiert werden kann, um die übereinstimmenden Gruppen zu erhalten.

Zum Beispiel mit der folgenden Verwendung:

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

wird das entsprechende CSS generiert:

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

Glückwunsch! Jetzt haben Sie Ihre eigenen leistungsstarken Atomic CSS Utilities. Viel Spaß!

CSS-Regeln-Fallback

In Fällen, in denen Sie CSS-Regeln-Fallback nutzen möchten, um neue CSS-Funktionen zu verwenden und gleichzeitig auf alte Browser zurückgreifen zu können, können Sie optional ein 2D-Array als CSS-Darstellung für Regeln mit denselben Schlüsseln zurückgeben. Zum Beispiel:

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

Was h-100dvh generiert:

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

Reihenfolge

UnoCSS respektiert die Reihenfolge der Regeln, die Sie im generierten CSS definiert haben. Spätere haben höhere Priorität.

Bei Verwendung dynamischer Regeln können mehrere Tokens übereinstimmen. Standardmäßig wird die Ausgabe derjenigen, die unter einer einzelnen dynamischen Regel übereinstimmen, alphabetisch innerhalb der Gruppe sortiert.

Regeln-Zusammenführung

Standardmäßig führt UnoCSS CSS-Regeln mit demselben Body zusammen, um die CSS-Größe zu minimieren.

Zum Beispiel generiert <div class="m-2 hover:m2">:

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

Anstelle von zwei separaten Regeln:

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

Spezielle Symbole

Seit v0.61 unterstützt UnoCSS spezielle Symbole, um zusätzliche Meta-Informationen für Ihr generiertes CSS zu definieren. Sie können auf Symbole aus dem zweiten Argument der dynamischen Regel-Matcher-Funktion zugreifen.

Zum Beispiel:

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

Wird generieren:

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

Verfügbare Symbole

• symbols.parent: Der Parent-Wrapper der generierten CSS-Regel (z. B. @supports, @media, usw.)
• symbols.selector: Eine Funktion zum Ändern des Selektors der generierten CSS-Regel (siehe Beispiel unten)
• symbols.layer: Ein String/Funktion/Regex-Match, der die UnoCSS-Ebene der generierten CSS-Regel setzt
• symbols.variants: Ein Array von Varianten-Handlern, die auf das aktuelle CSS-Objekt angewendet werden
• symbols.shortcutsNoMerge: Ein Boolean, um die Zusammenführung der aktuellen Regel in Shortcuts zu deaktivieren
• symbols.noMerge: Ein Boolean, um die Zusammenführung der aktuellen Regel in Shortcuts zu deaktivieren
• symbols.sort: Eine Zahl, um die Sortierreihenfolge des aktuellen CSS-Objekts zu überschreiben

Multi-Selektor-Regeln

Seit v0.61 unterstützt UnoCSS Multi-Selektor über JavaScript Generator-Funktionen.

Zum Beispiel:

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

Wird mehrere CSS-Regeln generieren:

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

Vollständig kontrollierte Regeln

TIP

Dies ist eine erweiterte Funktion, in den meisten Situationen wird sie nicht benötigt.

Wenn Sie wirklich einige erweiterte Regeln benötigen, die nicht von der Kombination aus Dynamischen Regeln und Varianten abgedeckt werden, bietet UnoCSS auch eine Möglichkeit, Ihnen die volle Kontrolle über die CSS-Generierung zu geben.

Es ermöglicht Ihnen, einen String aus der Body-Funktion der dynamischen Regel zurückzugeben, der direkt an das generierte CSS übergeben wird (dies bedeutet auch, dass Sie sich um Dinge wie CSS-Escaping, Varianten-Anwendung, CSS-Konstruktion usw. kümmern müssen).

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

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // Regeln verwerfen, die nicht übereinstimmen
      if (name.includes('something'))
        return

      // Wenn Sie möchten, können Sie die Varianten für diese Regel deaktivieren
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // Geben Sie einen String anstelle eines Objekts zurück
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* Sie können mehrere Regeln haben */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* oder Media Queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})