Ebenen

Die Reihenfolge von CSS beeinflusst ihre Prioritäten. Während die Engine die Reihenfolge der Regeln beibehält, möchten Sie manchmal möglicherweise einige Utilities gruppieren, um explizite Kontrolle über ihre Reihenfolge zu haben.

Verwendung

Im Gegensatz zu Tailwind CSS, das drei feste Ebenen (base, components, utilities) bietet, ermöglicht UnoCSS Ihnen, die Ebenen nach Ihren Wünschen zu definieren. Um die Ebene zu setzen, können Sie die Metadaten als drittes Element Ihrer Regeln übergeben:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // Wenn Sie die Ebene weglassen, wird sie `default` sein
  ['btn', { padding: '4px' }],
]

Dies wird generieren:

/* layer: default */
.btn { padding: 4px; }
/* layer: utilities */
.m-2 { margin: 0.5rem; }

Ebene kann auch bei jedem Preflight gesetzt werden:

preflights: [
  {
    layer: 'my-layer',
    getCSS: async () => (await fetch('my-style.css')).text(),
  },
]

Reihenfolge

Sie können die Reihenfolge der Ebenen steuern durch:

layers: {
  'components': -1,
  'default': 1,
  'utilities': 2,
  'my-layer': 3,
}

Ebenen ohne angegebene Reihenfolge werden alphabetisch sortiert.

Wenn Sie Ihr benutzerdefiniertes CSS zwischen Ebenen haben möchten, können Sie Ihr Einstiegsmodul aktualisieren:

// 'uno:[layer-name].css'
import 'uno:components.css'

// Ebenen, die nicht 'components' und 'utilities' sind, werden hier zurückfallen
import 'uno.css'

// Ihr eigenes CSS
import './my-custom.css'

// "utilities" Ebene hat die höchste Priorität
import 'uno:utilities.css'

CSS Cascade Layers

Sie können CSS Cascade Layers ausgeben durch:

outputToCssLayers: true

Sie können die CSS-Layer-Namen ändern mit:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // Die Standard-Ebene wird an die "utilities" CSS-Ebene ausgegeben.
    if (layer === 'default')
      return 'utilities'

    // Die Shortcuts-Ebene wird an die "shortcuts" Unterebene der "utilities" CSS-Ebene ausgegeben.
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // Alle anderen Ebenen verwenden einfach ihren Namen als CSS-Layer-Namen.
  }
}

Ebenen mit Varianten

Ebenen können mit Varianten erstellt werden.

uno-layer-<name>: kann verwendet werden, um eine UnoCSS-Ebene zu erstellen.

<p class="uno-layer-my-layer:text-xl">text</p>

/* layer: my-layer */
.uno-layer-my-layer\:text-xl{ font-size:1.25rem; line-height:1.75rem; }

layer-<name>: kann verwendet werden, um eine CSS @layer zu erstellen.

<p class="layer-my-layer:text-xl">text</p>

/* layer: default */
@layer my-layer{ .layer-my-layer\:text-xl{ font-size:1.25rem; line-height:1.75rem; } }