Sloji

Vrstni red CSS bo vplival na njihove prioritete. Medtem ko bo ohranil vrstni red pravil, boste morda želeli združiti nekatere pripomočke za ekspliciten nadzor njihovega vrstnega reda.

Uporaba

Za razliko od Tailwind CSS, ki ponuja tri fiksne sloje (base, components, utilities), UnoCSS vam omogoča, da definirate sloje po želji. Za nastavitev sloja lahko posredujete metapodatke kot tretji element vaših pravil:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // ko izpustite sloj, bo `default`
  ['btn', { padding: '4px' }],
]

To bo generiralo:

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

Sloj je lahko nastavljen tudi na vsakem preflightu:

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

Vrstni red

Vrstni red slojev lahko nadzorujete z:

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

Sloji brez določenega vrstnega reda bodo razvrščeni abecedno.

Ko želite imeti svoj prilagojeni CSS med sloji, lahko posodobite vstopni modul:

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

// sloji, ki niso 'components' in 'utilities' bodo uporabljeni tukaj
import 'uno.css'

// vaš lastni CSS
import './my-custom.css'

// "utilities" sloj bo imel najvišjo prioriteto
import 'uno:utilities.css'

CSS Cascade Sloji

CSS Cascade Sloje lahko izpišete z:

outputToCssLayers: true

Imena CSS slojev lahko spremenite z:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // Privzeti sloj bo izpisan v "utilities" CSS sloj.
    if (layer === 'default')
      return 'utilities'

    // Sloj bližnjic bo izpisan v "shortcuts" pod-sloj "utilities" CSS sloja.
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // Vsi drugi sloji bodo uporabili svoje ime kot ime CSS sloja.
  }
}

Sloji z uporabo variant

Sloji so lahko ustvarjeni z uporabo variant.

uno-layer-<name>: se lahko uporabi za ustvarjanje UnoCSS sloja.

<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>: se lahko uporabi za ustvarjanje CSS @layer.

<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; } }